Comenzaré desde el principio. Creo un sitio web receptivo, donde tengo un elemento que cambia la altura. En él se encuentra una imagen, a la que tuve que crear un contenedor para poder posicionar los nuevos elementos en relación con él. Desafortunadamente, después de cambiar el tamaño (por ejemplo, cuando enciende el teléfono), el contenedor no cambia el ancho junto con la imagen. Si actualiza el valor de un parámetro (por ejemplo, el "elemento de inspección" eliminar y agregar "pantalla"), ya está configurado correctamente. ¿Cómo resolver este problema?

var i = 0;
$('button').on('click', function() {
  if (i%2) $('.background').css('height', '200px');
  else $('.background').css('height', '300px');i++;
});
.background {
  width: 600px;
  height: 200px;
  background-color: black;
  transition: 0.3s;
}

.background > .container {
  height: 100%;
  display: inline-block;
  background-color: white;
}

.background > .container > img {
  height: 100%;
  opacity: 0.7;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="background">
  <div class="container">
    <img src="https://i.ytimg.com/vi/bVzpweTJvhc/hqdefault.jpg">
  </div>
</div>

<br><br>

<button>Change</button>
0
Invictus 26 dic. 2016 a las 23:35

3 respuestas

La mejor respuesta

Cuando container se muestra como inline funciona (y no sé por qué ... todavía)

var i = 0;
$('button').on('click', function() {
  if (i%2) $('.background').css('height', '200px');
  else $('.background').css('height', '300px');i++;
});
.background {
  width: 600px;
  height: 200px;
  color: white;
  background-color: black;
  transition: 0.3s;
}

.background > .container {
  display: inline;
}

.background > .container > img {
  height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="background">
  <div class="container">
    <img src="https://i.ytimg.com/vi/bVzpweTJvhc/hqdefault.jpg">
  </div>
  <span>I move too....</span>
</div>
<br><br>
<button>Change</button>
0
Ason 27 dic. 2016 a las 13:46

Su clase e imagen container no tienen ningún width definido para ellos. Esa es la razón. Dele a su container un width:50% y el para la imagen width:100%

0
Gabby_987 26 dic. 2016 a las 20:54

Yo uso

.my-container-div
{
    background-image: zoom
}

En cambio una imagen en un div. Con esto, puedes jugar con el div y sus propiedades de fondo, tamaño de fondo, posición de fondo ... etc.

Haría algo como esto:

.background > .container {
  height: 100%;
  width: 100%;
  background-image: url("https://i.ytimg.com/vi/bVzpweTJvhc/hqdefault.jpg");
  background-size: cover;    
}
0
Poncho Gonzalez 26 dic. 2016 a las 20:54