Hacer que la imagen de la división sea sensible

Estoy atascado en hacer imágenes dentro del fondo de una clase sensible. La URL del sitio web.

Sería muy útil si me pudieras ayudar, estoy usando bootstrap y nivo slider. El css y el html que estoy usando para el control deslizante se dan a continuación.

El css:

.slider-wrapper { width: 310px; height: 650px; background: url("images/iPhone.png") center center ; background-size:cover; } .nivoSlider { position:relative; width:290px; height:512px; top:60px; bottom:65px; left:23px; right:24px; overflow: hidden; } .nivoSlider img { position:absolute; top:0px; left:0px; width:100%; height: 100% } 

El html:

  

Y una captura de pantalla del código anterior (con html adicional) en una computadora portátil:

introduzca la descripción de la imagen aquí

Aquí está la url del sitio web. Intente verlo por debajo del ancho de 380 px, ya que es cuando ocurre el problema. Quiero que la imagen se vea correctamente a menos de 380 px.

Quiero que todas las imágenes se vuelvan más pequeñas y estén en el centro y correctamente alineadas por debajo de 380px, pero obtengo esto:

introduzca la descripción de la imagen aquí .

Estaría más que agradecido si pudieras ayudarme

Es un poco difícil de depurar sin ver la imagen completa, pero creo que necesitas usar los anchos máximos como el código a continuación. Esto evitará que tus divs / imágenes se vuelvan más grandes de lo que quieres, pero permitirá que sean más pequeñas si es necesario.

 .slider-wrapper { max-width: 310px; max-height: 650px; background: url("images/iPhone.png") center center ; background-size:cover; } .nivoSlider { position:relative; max-width:290px; max-height:512px; top:60px; bottom:65px; left:23px; right:24px; overflow: hidden; } .nivoSlider img { position:absolute; top:0px; left:0px; max-width:100%; height: auto; } 

Los elementos posicionados absolutos deben colocarse en un contenedor flotado para moverse de manera responsable. El contenido móvil se moverá en sincronización con el shell de la pantalla si coloca el contenedor absoluto en uno flotante. Me encontré con el mismo problema en uno de mis proyectos: es una solución sorprendentemente fácil.

Pen: http://codepen.io/staypuftman/pen/tFhkz

Tenga en cuenta que el elemento rosa posicionado absoluto se mueve a medida que cambia el tamaño de la pantalla mientras se mantiene en línea con el cuadro azul. Toda la caja azul con el elemento rosa absolutamente posicionado en el interior flotará como unidad a cualquier ancho.

HTML:

  

Eaters: Find Your Favorite Food Truck

CSS (los colores de fondo son para mostrar elementos):

 .hero-background { background: #dedede; height: 100%; margin-top: 4em; min-height: 20em; min-width: 100%; } .hero-text-area-container { background: #d6ffd1; float: left; margin: 0% 6%; max-height: 25em; padding-top: 11em; position: relative; vertical-align: middle; width: 55%; } .hero-background .hero-text-area-container h3 { background: #f7f7f2; opacity: .8; padding: 1em; text-align: center; } .iphone-backdrop { background: #d1e2ff; float: left; height: 120px; max-width: 320px; padding-top: 2em; position: relative; width: 100px; } .hero-image-band-container { background: #ffd1d1; height: 80px; position: absolute; width: 80px; top: 13%; left: 0; bottom: 0; right: 0; } 

Cambie el css en nivo-slider.css desde:

 .nivoSlider img { position:absolute; top:0px; left:0px; width:100%; height:100% } 

A

 .nivoSlider img { position:absolute; top:0px; left:0px; /* now this is the important things for your problem */ vertical-align: baseline !important; max-width: none !important; } 

Encontré la respuesta. Me la envió un usuario. Así que la comparto si alguien más tiene algún problema:

“Entonces, para no tener todas las cosas en los comentarios, publico una respuesta.

El “problema” en anchos de pantalla / viewport de 380px e inferior tiene varios problemas.

En su

exterior con la clase slider-wrapper3 (es la que contiene el iPhone como imagen de fondo), debe usar lo siguiente en su CSS:

 .slider-wrapper3 { background-size: contain; /* you use cover */ background-repeat: no-repeat; /* keep the rest of your actual code */ } 

y elimine la configuración de ancho ( width: 310px; ) al menos para su diseño de pantalla pequeña.

Al hacerlo, fijará la posición y el tamaño del contenedor (y también la imagen de fondo).

Por lo tanto, aún debe ajustar el tamaño de la imagen (probablemente en su secuencia de comandos de control deslizante, o de donde provengan las dimensiones de la imagen) “.

Prueba esto:

 @media(max-width: 380px) { .nivoSlider{ position:relative; width:94%; height:378px; top:85px; bottom:0px; left:8px; overflow: hidden; }