3

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?

8
  • ¿No puedes añadir ninguna clase al css? el 4 nov. 2016 a las 17:06
  • El CSS lo puedo cambiar como quiera. Lo que no puedo cambiar es el HTML (ni añadir JS)
    – Alvaro Montoro
    el 4 nov. 2016 a las 17:06
  • Al HTML quería decir jajaja el 4 nov. 2016 a las 17:06
  • Después de ocupar el 75%, el alto también tendría que seguir siendo 425px? Ya que si el objetivo es que sea responsive, la imagen se tendrá que hacer más pequeña de altura también. Me refiero a cuando mueves la pantalla. el 4 nov. 2016 a las 17:14
  • El alto será siempre 425px. Tiene estilos diferentes para tableta y móvil (que no he incluido en la pregunta porque no son relevantes) en la que ocupará un 100% del ancho con altura automática. Pero para pantalla grande el alto estará fijo a 425px (porque en el 25% restante hay un scroller con datos)
    – Alvaro Montoro
    el 4 nov. 2016 a las 17:16

2 respuestas 2

2

Tras probar varios ejemplos, que he encontrado, y ninguno ha funcionado al 100%, he podido crear un simulador background-size:cover.

En los dos ejemplos he dejado el HTML original.

Primera (y verdadera) opción :

Ver Demo 1 simular background-size:cover

p {
  position: relative; 
  top: 0; 
  left: -50%; 
  width: 200%;
  height: 425px;
  overflow-x: hidden;
}

img {
  margin: auto;
  min-width: 50%;
  position: absolute;
  top: 0;
  left: -50%;
  right: -50%;
  bottom: 0;
}

Segunda opción:

Es con object-fit: cover; lo único malo es que no esta soportado en Internet Explorar.

Ver Demo 2 con object-fit

img {
  width: 100vw;
  height:425px;
  display: block;
  object-fit: cover;
}
5
  • 1
    La primera opción es más lo que buscaba. La segunda opción no funciona bien cuando el contenedor hero tiene un ancho del 75% (aunque se puede solucionar fácilmente poniéndole un width:75vw a la imagen)
    – Alvaro Montoro
    el 5 nov. 2016 a las 13:00
  • hmmm... misterio del voto negativo... el 5 nov. 2016 a las 17:40
  • Parece que alguien ha votado negativo ambas respuestas. La verdad no sé por qué
    – Alvaro Montoro
    el 6 nov. 2016 a las 17:55
  • @AlvaroMontoro - Si de eso me he dado cuenta también, lo dicho, queda misterioso el 6 nov. 2016 a las 17:58
  • @AlvaroMontoro El misterio de los votos negativos sin explicación. Con lo poco que cuesta dejar un breve comentario constructivo, al menos aprenderíamos algo más ^^ el 8 nov. 2016 a las 7:43
0

El width al 75% no te lo está cogiendo porque está intentando hacer el 75% de la anchura del elemento padre, es decir, del body, y como este no tiene una anchura definida por eso no te hace el 75% de la imagen. Ponle al body una anchura fija o width: 100% y ya te cogerá el 75% del contenedor.

Por otro lado, usando min-height: 100% y min-width: 100% obligas a la imagen a que ocupe el 100% del contenedor, por lo tanto nunca se va a hacer responsive. Para pantallas muy pequeñas en cuanto a anchura, como el contenedor va a seguir midiendo 425px de altura la imagen se va a estirar hacia abajo.

El elemento p es un elemento inline por lo que necesita de la propiedad display: block para poder tener altura y anchura ya que los elementos inline no pueden tener estas propiedades.

Puedes comprobar que la imagen va a ser responsive para cualquier tipo de pantalla.

El código corregido quedaría así:

* {
  margin:0;
  padding:0;
  border:0;
  width: 100%;
  height: 100%;
}

#hero {
  /*background-image: url("http://placehold.it/900x520");
  background-size: cover;*/
  height:425px;
  width:75%;
  background-color: red;
}

p{
  display: block;
  min-width: 100%;
  min-height: 100%;
}

.image, .content{
  height: 100%;
  width: 100%;
}

img{
  width: 100%;
  height: 100%;
 }
<div id="hero">
  <div class="image">
    <div class="content">
      <p>
        <img src="http://placehold.it/900x520" alt="Gato" />
      </p>
    </div>
  </div>
</div>

6
  • Esto no se comporta exactamente como background-size:cover ya que deja espacios en blanco (o en rojo) si la imagen no ocupa todo el div (es por eso que tiene el min-width:100% y min-height:100%). Lo que quiero evitar es precisamente eso, que queden espacios en blanco en el div contenedor
    – Alvaro Montoro
    el 4 nov. 2016 a las 17:32
  • Vale, entendido. Déjame unos minutos para editar la respuesta. el 4 nov. 2016 a las 17:33
  • 1
    Esto parece más background-size: contain, ¿es posible?
    – Shaz
    el 4 nov. 2016 a las 17:35
  • @AlvaroMontoro Mira a ver si esto es más acorde a lo que quieres. el 4 nov. 2016 a las 17:44
  • 1
    Gracias por las alternativas, pero no son exactamente lo que busco. La primera opción que hiciste era más como background-size:contain, y ésta es como background-size:100% 100%
    – Alvaro Montoro
    el 5 nov. 2016 a las 12:57

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.