Estoy trabajando en una página web en la que no puedo cambiar la estructura HTML y no puedo usar JavaScript. Sólo puedo hacer cambios en el CSS.
La idea es que haya una sección hero en la que el cliente subirá una imagen que se pondrá en línea (con la etiqueta img
) y quiere que sea responsiva. El alto será fijo (425px) y el ancho será variable (ajustándose a un % fijo de la pantalla).
Idealmente pondría la imagen como fondo del div
principal y le pondría background-size:cover
para que se ajustara automáticamente al tamaño del contenedor. Pero estoy limitado al HTML proporcionado.
Éste es el código que tengo hasta ahora (simplificado, pero es lo que hay):
* {
margin:0;
padding:0;
border:0;
}
#hero {
height:425px;
width:75%;
float:left;
}
#hero div, #hero p {
width:100%;
height:100%;
overflow:hidden;
}
#hero img {
min-width:100%;
min-height:100%;
transform:translate(0, -12.5%);
}
<div id="hero">
<div class="image">
<div class="content">
<p>
<img src="http://placehold.it/900x520" alt="Gato" />
</p>
</div>
</div>
</div>
El código de arriba funciona más o menos, pero no me termina de convencer porque la imagen no acaba centrada y el -12.5% del trasnform:translate
es un número mágico que encontramos hacía que no se quedaran espacios en blanco. NOTA: la imagen puede cambiar de tamaño, siempre tendrá una proporción parecida, pero a veces será más grande y otras veces más pequeña.
¿Hay alguna manera de simular el comportamiento del background-cover
pero en lugar de con una imagen de fondo, con una imagen en línea?