2017-01-29 6 views
-1

Я следующий дизайн enter image description hereКак сделать 2 изображения (та же высота разная ширина) Термоусадочные пропорционально

Как сохранить эти 2 изображения остаться бок о бок, и когда браузер сжимается два должно сокращаться пропорционально поддержание пропорция и высота. Невозможно правильно использовать столбцы начальной загрузки и отображение встроенного блока для меня тоже не работает. Это сводит меня с ума. Кто-нибудь может мне помочь?

+0

Пожалуйста обеспечивают [mcve]. –

+0

К сожалению, код был очень прост. Я думал, что это необязательно. – Raul

+0

SO не для людей, чтобы написать код для вас. Это для вас написать код и обратиться за помощью, когда вы застряли в коде, который вы написали. –

ответ

1

Дайте% width каждому в соответствии с их отношением.

img { 
 
    padding: 1%; 
 
    width: 64.3%; 
 
} 
 
img + img { 
 
    width: 31.5% 
 
}
<img src="http://lorempixel.com/940/400" /><img src="http://lorempixel.com/460/400" />

+0

Спасибо! Мне нужно было немного подправить его, но ты указал мне в правильном направлении. Это было не сложно, но почему-то я не мог думать прямо, и я нахожусь в крайнем сроке. – Raul

1

https://jsfiddle.net/2028L68u/1/

CSS -

img{ 
    display:inline-block; 
} 
#img1{ 
    width:67%; 
    float:left; 
} 

#img2{ 
    width:33%; 
    float:left; 
} 

HTML -

<img id="img1" src="http://www.sixdegreesdigitalmedia.com/wp-content/uploads/2016/06/Google-Tools-part-two-940x400.jpg" /> 
<img id=img2 src="http://kitengelaterraces.com/wp-content/uploads/2015/09/Slider-460x400.jpg"/>