Проблема с изображениями?

Question

[svilkov87]

Приветствую всех!
Не получается сделать картинки одинаковой ширины и высоты. Одна из трех картинок выше остальных, хотя всем им установлены свойства max-width: 100%;
height: auto;

<div class="main">
        <div class="blocks">
                <img src="https://www.firestock.ru/wp-content/uploads/2016/08/c92b7fdbbd49265-700x452.jpg" />
        </div>
        <div class="blocks">
                <img src="https://www.firestock.ru/wp-content/uploads/2016/08/d037df4af8c97ba-700x524.jpg " />
        </div>
        <div class="blocks">
                <img src="https://www.firestock.ru/wp-content/uploads/2016/08/e7c098e3ff03b72-700x437.jpg" />
        </div>
</div>

.main{
    outline: 1px solid #000;
    position: relative;
    width: 96%;
    max-width: 960px;
    margin: 0 auto;
    text-align: center;
}
.blocks{
    width: 250px;
    height: 250px;
    float: left;
}
.blocks img{
    max-width: 100%;
    height: auto;
    display: block;
		
}

И на всякий случай еще ссылка https://jsfiddle.net/svilkov87/jd3hv6dm/

Comments

[safbek]

Как решили проблему, не подскажите?

[svilkov87]

safbek: да выход один - задать height не auto, а фиксированной высоты

Answer 1

[Rob1n Bobin]

так у вас изображения разных размеров. Т.е. auto для высоты, значит соблюдение пропорций оригинала.

Comments

[svilkov87]

Да, но домустим картинки будут выводиться из бд и размеры там могут быть абсолютно разные... А нужно сделать их одинаковыми, растянутыми по ширине родительского блока. В css есть свойство background-size: cover. Но оно для фона. Вопрос в том, как подогнать все по размеру

[svilkov87]

Например, есть шаблон thebootstrapthemes.com/live/thebootstrapthemes-res... там вкладка "tools" - как это реализовано?

[Павел]

svilkov87: я один не вижу эту магическую вкладку?

[svilkov87]

mrusklon: foods , а не tools

[Павел]

svilkov87: ну так там все картинки одинаковых пропорций

Answer 2

[iBird Rose]

средствами css вы не сделаете чего хотите. либо задавайте эти картинки для блоков бэкграундом через style="", либо на стороне cms обрезайте картинки чтобы имели одинаковые пропорции

Answer 3

[Алмаз Бисенбаев]

Юзай фиксированный width, а не max-width

Answer 4

[archelon]

height: фиксированный размер в px/em/rem
width: auto