Автоматически сжимать изображения (и оставаться встроенными) при уменьшении размера окна

У меня есть три изображения, выровненные по вертикали внутри div. Когда браузер сжимается, третье изображение больше не помещается в div, что приводит к тому, что это изображение выпадает на вторую строку. Я использовал свойства auto и 100% ширины и высоты в CSS, но он не сохраняет изображения встроенными и не изменяет размер изображения. Кто-нибудь знает, как это исправить?

<div class="media">
    <img class="media_image" src="source1_name">
    <p>Some text that overlays the image</p>                            
</div>
<div class="media">
    <img class="media_image" src="source2_name">    
    <p>Some text that overlays the image</p>                
</div>
<div class="media">
    <img class="media_image" src="source3_name">    
    <p>Some text that overlays the image</p>                        
</div>      

.media {
    display: inline-block;
    position: relative;
    vertical-align: top;
    margin-left: 16px;
    }

 .media img {
    width: auto;
    height: auto;
    }

.media_image { 
    display: block; 
    }

image css sizing
person cbella    schedule 11.04.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Попробуй это:

.media {
    box-sizing: border-box;
    display: inline-block;
    position: relative;
    vertical-align: top;
    width: 33,33%;
    margin-left: 16px;
    }

 .media img {
    width: 100%;
    height: auto;
    }

.media p {
   position: absolute;
   left: 0;
   bottom: 20px;
   }

Он устанавливает ширину элемента равной одной трети родительского элемента (тела?), а ширину изображения равной полной ширине этих трех элементов, которые будут изменяться, когда родительский контейнер сжимается на меньших экранах (при условии, что он имеет, например, 100% ширина)

Что касается последнего правила, в основном абсолютная позиция важна для наложения изображений, остальное/фактическое положение зависит от вас.

person Johannes    schedule 11.04.2016