imagen css que se estira al 100% de altura

1 minuto de lectura

avatar de usuario
c-sostenido-y-swiftui-devni

Tengo el css, no importa lo que esté haciendo, está estirando la imagen, pero no veo cómo la imagen es pequeña, pero está haciendo que la altura que estoy usando sea enorme.

<?PHP the_post_thumbnail( 'full' );  ?>

El css utilizado es el siguiente pero como verán es el causanteingrese la descripción de la imagen aquí mis imágenes se estiran y no tienen el tamaño correcto.

.services-icon img {
    max-width: 100%;
    display: block;
    width: 200px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;

URL está aquí

http://www.lockmsiths.solitudesoftware.co.uk/#site

avatar de usuario
andrés

Su <img> la etiqueta tiene un width y un height atributo establecido por WordPress.

<img width="1000" height="500" ... >

En su CSS puede establecer una altura automática para mantener la relación de aspecto, de acuerdo con su 200px ancho:

.services-icon img {
    height: auto;
}

Tenga en cuenta que su CSS sobrescribe su configuración de WordPress para esta imagen.

Puede forzar que la altura se establezca automáticamente con height: auto; en el CSS. Sería mucho mejor cambiar la altura real de la imagen en WordPress para que la width y height los atributos de la imagen son correctos (como mencionó @andreas).

avatar de usuario
Mario Junior Torres Pérez

Elimine el ancho: 200px en su css, si desea que las imágenes usen el ancho del 100% en el contenedor. La etiqueta tiene atributos de ancho y alto, elimínela. Si no puede controlar esos atributos en línea, puede usar javascript y eliminarlo.

No es necesario usar height: auto en este caso, porque el estilo del navegador aplica ese estilo. Pero te recomiendo que lo uses.

¿Ha sido útil esta solución?