Stacking Images CSS

Question

Я знаю его легко складывать изображения друг над другом, но я просто задавался вопросом, можно ли это достичь, но поддерживая жидкое изображение? Как только я использую атрибут position, я должен указать ширину. Затем изображение не будет изменяться с помощью браузера.

Спасибо за любую помощь.

Joe

Answer 1

Возможно, вы можете использовать width: 100%;. Кроме того, вам не нужно будет помещать их в divs, если вы просто укажете display: block; на элементе img. Возможно, вам придется указать max-width, но это зависит от вашего конкретного приложения и необходимой поддержки браузера.

Answer 2

Не могли бы вы поместить их в стек div?

Answer 3

А width : 100% работает с position : absolute если display : block

Ваша проблема, скорее всего, у вас есть только абсолютно positionned IMG в вашем DIV, поэтому его размеры равны нулю (так как правила позиционирования.)

Два способа решить эту проблему :

• сделать один img не совсем позиционированным. Его размеры будут равны размерам родительского div

• используйте прозрачный img, с position : relative, с тем же размером, что и ваши реальные imgs: он довольно грязный, но он установит размеры родительского div.

Они будут работать, только если ваши размеры imgs одинаковы. В противном случае вы должны использовать JS-решение.

Answer 4

сделать фотографии на фоне либо на пустой <img> или <div> что-то вроде этого

.container { 
    position: relative; 
    height: 400px; 
    width: 100%; 
} 

.container > div { 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
} 

<div class="container"> 

    <div style="background: url('myimage1.jpg');"><!-- nothing --></div> 
    <div style="background: url('myimage2.jpg');"><!-- nothing --></div> 
    <div style="background: url('myimage3.jpg');"><!-- nothing --></div> 

</div>