Ancho no establecido para volver al atributo html en línea “ancho = XX”

10 minutos de lectura

Ancho no establecido para volver al atributo html en linea
Miró

Estoy tratando de hacer un tamaño de imagen a lo que diga el atributo (width=XX) y no el CSS. Eso es lo que establece el editor HTML de WordPress cuando usa la esquina de arrastre de la interfaz de usuario para cambiar el tamaño de la imagen a 85 x 30. Sin embargo, el tema tiene algo de css height/width:auto lo que hace que el img vaya a sus dimensiones naturales y no puedo encontrar una manera de ‘matar’ ese CSS para que vuelva al en línea. (Sin editar el CSS del tema, por supuesto)

probé con width:unset y inherit en vano. ¿Algunas ideas?

/* Untouchable CSS */
.row .col img:not([srcset]) {
    width: auto;
}

.row .col img {
    height: auto;
}
/*End Untouchable CSS */

img{
  width:unset  !important; /*doesn't work*/
  height:unset  !important; /*doesn't work*/
}
<div class="row">
  <div class="col">
    <a href="#"><img width="85" height="30" src="https://placehold.it/340x120/00aaaa/fff/?text=Logo"></a>   
  </div>
</div>

  • ¡Problema interesante! pensé que auto era el valor predeterminado de la width y height ¡atributo! Ahora publiqué una solución a continuación, pero con gusto le daré la palabra a alguien que tenga la respuesta real.

    – Señor Lister

    17 de diciembre de 2017 a las 8:21

  • @MrLister auto es el valor predeterminado, pero la imagen es más grande que el valor especificado en el atributo de la imagen, por lo que al especificar automático tanto en la altura como en el ancho, borra estos valores y se considera el tamaño predeterminado;)

    – Temani Afif

    17 de diciembre de 2017 a las 9:40

  • @TemaniAfif Si auto es el valor predeterminado, entonces, ¿cómo explica lo que sucede en el código del OP? A falta de estilos, <img width="80" src="..."> tiene 80 píxeles de ancho. Pero si luego agregas img {width: auto} a la hoja de estilo, ¡el ancho se convierte en el ancho del gráfico de origen! ver violines, antes de y después

    – Señor Lister

    17 de diciembre de 2017 a las 10:45


  • @MrLister si agrega width:auto y height:auto ambos borrarán el valor en las imágenes (ambos deben estar presentes) y auto significa el ancho predeterminado de la imagen (Valor por defecto. El navegador calcula el ancho.)

    – Temani Afif

    17 de diciembre de 2017 a las 10:52


  • @TemaniAfif Agregando height: auto así no hace ninguna diferencia a mis violines. Todavía no sé qué pasa. También publicó como su respuesta solo una solución alternativa, sin resolver realmente la pregunta de qué está sucediendo exactamente.

    – Señor Lister

    17 de diciembre de 2017 a las 10:56

Ancho no establecido para volver al atributo html en linea
Temani Afif

Simplemente agregue el atributo a la imagen para evitar que se aplique el primer estilo y elimine el estilo que agregó. La idea es mantener solo una propiedad CSS para auto (alto o ancho) y el otro obtendrá el valor especificado en la imagen y su imagen tendrá el alto/ancho deseado:

Por cierto, le aconsejo que especifique un valor correcto para srcset y no lo dejes vacío

/* Untouchable CSS */
.row .col img:not([srcset]) {
    width: auto;
}

.row .col img {
    height: auto;
}
/*End Untouchable CSS */
<div class="row">
  <div class="col">
    <a href="#"><img width="85" height="30"  src="https://placehold.it/340x120/00aaaa/fff/?text=Logo"></a>   
  </div>
</div>

ACTUALIZAR

Para añadir más aclaraciones, especificando width:auto y height:auto anula el valor especificado en el atributo de la imagen.

ingrese la descripción de la imagen aquí

Y el auto valor significa El navegador calculará y seleccionará un ancho para el elemento especificado. y luego la imagen obtendrá su tamaño original/predeterminado.

Al quitar uno de los auto valor (en este caso para el ancho), el valor del atributo de la imagen se considerará nuevamente y el otro, como siempre es automático, será calculado por el navegador y en este caso será va a encajar el valor en el atributo porque el navegador mantendrá la relación mientras calcula, pero puede especificar cualquier valor que desee que no se considere.

Aquí hay un código para mostrar esto:

.col img {
  height: auto;
}

.col2 img {
  height: 100px;
}

.col3 img {
  height: 300px; /* 300px will overribe the value in the attribute */
  width:auto; /* auto will override the attribute so the browser will calculate the width by keeping the ratio of the image*/
}
<div class="col">
  <img width="85" height="30"  src="https://placehold.it/340x120/00aaaa/fff/?text=Logo">
</div>

<div class="col">
  <!-- specify a big height value here  -->
  <img width="85" height="300000"  src="https://placehold.it/340x120/00aaaa/fff/?text=Logo">
</div>
<div class="col2">
  <!-- for this one the width is specified in attribute and height in CSS  -->
  <img width="85" height="300000"  src="https://placehold.it/340x120/00aaaa/fff/?text=Logo">
</div>
<div class="col3">
  <img width="85" height="300000"  src="https://placehold.it/340x120/00aaaa/fff/?text=Logo">
</div>

Aquí hay una pregunta similar con más detalles:

HTML5: ¿puedo usar ancho y alto en IMG?

  • Funciona como el encanto. Gracias por la explicación.

    – Miró

    17 de diciembre de 2017 a las 8:28

  • Ok, perfecto. Todavía no responde la pregunta del OP, ¿cuál sería el CSS para escribir si desea revertir los tamaños al valor predeterminado, si no es así? auto.

    – Señor Lister

    17 de diciembre de 2017 a las 12:23

  • @MrLister, supongo que no puede, ya que estos atributos no pertenecen a CSS y simplemente ayudan al navegador a decidir sobre el ancho/alto del elemento, de modo que cada vez que especifique cualquier valor de ancho/alto en el CSS, ya no se considerarán en todos. Y haga lo que haga en el CSS, siempre habrá un estilo en el CSS que los anulará y los hará no considerados.

    – Temani Afif

    17 de diciembre de 2017 a las 12:27


  • @TemaniAfisi ahora lo entiendo. El valor predeterminado, auto se utilizará si no hay otras influencias; los width atributo anula el valor predeterminado y el width la propiedad de estilo anula el atributo. Así que no importa en qué valor establezca la propiedad, nunca volverá al valor del atributo.

    – Señor Lister

    17 de diciembre de 2017 a las 15:02

1647565931 666 Ancho no establecido para volver al atributo html en linea
Sr. Lister

Si puede usar JavaScript, puede copiar los valores de la width y height atributos a un estilo en línea.

var img = document.querySelector('.row .col img:not([srcset])');

img.style.width = img.getAttribute('width')+'px';
img.style.height = img.getAttribute('height')+'px';
/* Untouchable CSS */
.row .col img:not([srcset]) {
    width: auto;
}

.row .col img {
    height: auto;
}
/*End Untouchable CSS */
<div class="row">
  <div class="col">
    <a href="#"><img width="85" height="30" src="https://placehold.it/340x120/00aaaa/fff/?text=Logo"></a>   
  </div>
</div>

Editar:

Después de mucha introspección, la respuesta real es que no hay una respuesta CSS. Este no es un problema de qué CSS usar, sino de prioridad.
El proceso real de qué valor se usa es así:

  • Toma el valor por defecto
  • ¿Hay un valor de atributo? Si es así, úsalo
  • ¿Hay algún CSS explícito? Si es así, usa eso.

y esto no tiene nada que ver con la especificidad de CSS. Entonces, incluso si el valor predeterminado de width es autoponiéndolo en auto en la hoja de estilo cambia la apariencia.

Lo mismo, por cierto, se aplica a otras propiedades de CSS que tienen atributos equivalentes. Como ejemplo, tome text-align. Su valor predeterminado es startlo que significa que left o right depende de las circunstancias. Así que si tienes este código:

<p align="center">This is some html</p>

incluso si el valor predeterminado de text-align es start, todavía estará centrado, debido al atributo. Sin embargo, si establece text-align explícitamente en su hoja de estilo, la propiedad anulará el atributo y quedará alineado después de todo.

p {text-align:start}
<p align="center">This is some html</p>

Entonces, al final del día, si no desea que una hoja de estilo de restablecimiento cambie su apariencia predeterminada, la solución es eliminar esos estilos de la hoja de estilo de restablecimiento. ¡No puede restablecer el reinicio con un nuevo CSS!

1641821299 814 ¿Que significa x paquetes estan buscando financiacion cuando se ejecuta
Stokely

Me gustaría agregar a esta discusión ya que descubrí el problema.

Todo lo mencionado anteriormente es cierto. Pero lo que hacen los navegadores modernos en HTML5 ya no funciona como antes, ya que cambiaron la forma en que los navegadores deben interpretar width y height atributos Ahora no es necesario que respeten esos valores HTML para determinar el ancho y el alto, sino que los usen como “sugerencias” para crear una “relación de aspecto” que determine las dimensiones finales en CSS. Esas dimensiones vuelven al ancho y alto nativos de la imagen si modifica el CSS. Los navegadores usan los atributos, su CSS y las dimensiones nativas de las imágenes para determinar la altura y el ancho a través de un nuevo valor de CSS que crea que anula los valores de los atributos originales. Así que esos valores ahora están perdidos. ¡Loco!

Para probar este cambio en HTML5, intente lo siguiente:

Cree una imagen de 100 x 100 píxeles y agregue un elemento “img” a su página web. Ahora cambie su tamaño a un valor personalizado de 500 x 500 píxeles agregando 500 a los atributos de ancho y alto de su imagen de la siguiente manera:

<img id="image1" src="/image.jpg" width="500" height="500" onclick="Javascript: alert(this.width);"  />

Observe la alerta emergente de Javascript que agregué. Eso probará lo que sucede con los valores de los atributos de las imágenes. Ahora cree un estilo que “revierta” o restablezca los estilos de las imágenes en el navegador:

    html body img {
        all: revert;
    }

¿CUÁL ES EL ANCHO Y EL ALTO DE LA IMAGEN? Haga clic en la imagen con el evento del cuadro de alerta de Javascript. La ventana emergente dice “100”, el ancho nativo de las imágenes no el ancho del atributo. Ya no son 500 píxeles los que configuraste en el atributo. ¿Por qué?

Lo que sucedió es que los nuevos estándares HTML5 han pedido a los proveedores que ya no respeten los atributos de ancho y alto, sino que “calculen” el nuevo ancho y alto en función de una relación de aspecto primero y LUEGO creen ancho y alto en CSS en la memoria. Cuando utilicé “all:revert” para restablecer los estilos, destruí ese valor calculado que sobrescribe los atributos HTML, ¡así que incluso Javascript extrae el valor incorrecto! Pero el navegador borró el ancho y alto del atributo img. ¡Así que se ha ido!

En otras palabras, NO PUEDE recuperar los valores de atributo de ancho y alto ORIGINALES tal como se han interpretado. El navegador en HTML5 lo eliminó y lo reinterpretó a un valor personalizado de CSS. Es por eso que confiaría en el antiguo W3C en lugar del nuevo organismo de estándares WHATSWG, ya que ya no existe un estándar. Dicen en su documentación:

“Los atributos de dimensión no están destinados a ser utilizados para estirar la imagen”.

Las imágenes tradicionalmente han estado haciendo eso durante años. Así que esto ahora rompe muchas imágenes de sitios web. Es un conjunto cambiante de reglas que no son intuitivas y no reflejan cómo los usuarios esperan que funcionen los atributos.

Por cierto… puede sortear este “error” comprando atributos de “ancho de datos” y “alto de datos” a sus imágenes y luego usando Javascript para “volver a aplicar” los valores verdaderos nuevamente. Pero los navegadores modernos seguirán intentando establecer de forma predeterminada el ancho y el alto reales de la imagen, no los atributos, si modifica su interpretación de CSS.

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad