1

Имеются изображения разной высоты, но при изменении размера экрана нужно, чтобы высота блока, содержащего изображения была постоянной, т.е. чтобы при уменьшении размера изображения высота изображения также уменьшалась пропорционально.
И чтобы большее изображение принимало высоту меньшего изображения.

Сейчас при уменьшении размера экрана блоки с изображениями разной высоты.

Подскажите, как сделать адаптивные изображения, и чтобы высота блока была постоянной при масштабировании экрана. Желательно это сделать с помощью одного CSS.

.wrapper {
  width: 90%;
  position: relative;
}

ul {
  text-align: center;
}

li {
  width: 32%;
  display: inline-block;
  font-size: 0;
  border: 1px solid gray;
  vertical-align: top;
}

.img {
  max-height: 220px;
  display: inline-block;
  overflow: hidden;
}

a {
  display: inline-block;
}

img {
  max-width: 100%;
  height: auto;
}
<section class="news">
  <div class="wrapper">
    <ul>
      <li>
        <div class="img">
          <a href="#"><img src="http://ru.fishki.net/picsw/052013/16/auto/ferrari/auto-003.jpg" alt=""></a>
        </div>
        <h3><a href="#">Title</a></h3>
      </li>
      <li>
        <div class="img">
          <a href="#"><img src="http://xn--45-6kc5ak0bf.xn--p1ai/wa-data/public/shop/products/86/68/6886/images/5672/5672.750.jpg" alt=""></a>
        </div>
        <h3><a href="#">Title</a></h3>
      </li>
    </ul>
  </div>
</section>
jsfiddle-11nx6w0f

5
  • Укажи высоту в vh
    – Yuri
    25 июл 2017 в 14:27
  • Так вам нужно сделать так, чтобы высота картинок была одинаковая и чтобы ширина также оставалась фиксированной по ширине вашего li в 32%?
    – Cheg
    25 июл 2017 в 15:11
  • @Cheg, нужно чтобы изображение занимало всю ширину 32%, а высота чтобы уменьшалась пропорционально при масштабировании, чтобы было адаптивное изображение, разве это не понятно из вопроса?
    – word
    25 июл 2017 в 15:13
  • 1
    @word ну вы же понимаете, что в таком случае наибольшее изображение будет обрезаться, так?
    – Cheg
    25 июл 2017 в 15:14
  • @Cheg, да, так, как это сделать?
    – word
    25 июл 2017 в 15:15

2 ответа 2

1

padding-bottom:66.625% выводится по формуле:

(высота изображения * 100) / ширина изображения

В вашем случае по пропорциям наименьшего изображения выходит 533*100/800 = 66.625.

.wrapper {
  width: 90%;
  position: relative;
}

ul {
  text-align: center;
}

li {
  width: 32%;
  display: inline-block;
  font-size: 0;
  border: 1px solid gray;
  vertical-align: top;
}

.img {
  width: 100%;
  height: 0px;
  padding-bottom: 66.625%;
  max-height: 220px;
  display: inline-block;
  overflow: hidden;
}

a {
  display: inline-block;
}

img {
  max-width: 100%;
  height: auto;
}
<section class="news">
  <div class="wrapper">
    <ul>
      <li>
        <div class="img">
          <a href="#"><img src="http://ru.fishki.net/picsw/052013/16/auto/ferrari/auto-003.jpg" alt=""></a>
        </div>
        <h3><a href="#">Title</a></h3>
      </li>
      <li>
        <div class="img">
          <a href="#"><img src="http://xn--45-6kc5ak0bf.xn--p1ai/wa-data/public/shop/products/86/68/6886/images/5672/5672.750.jpg" alt=""></a>
        </div>
        <h3><a href="#">Title</a></h3>
      </li>
    </ul>
  </div>
</section>

2
  • а как высчитывать высоту по вашей формуле (высота изображения * 100) / ширина изображения, если для ширины изображения выбраны проценты 32% ?
    – word
    25 июл 2017 в 18:18
  • @word это не важно. вы можете высчитать высоте и по уменьшенному изображению - результат будет практически тот же. например, в коде вашего примера в вопросе картинка получается размером 161.44х107.55 - отсюда получается 66.62%
    – Cheg
    25 июл 2017 в 18:23
0

Сoветую обратить внимание на flexbox

.wrapper {
  width: 90%;
  position: relative;
}

ul {
  display: flex;
  width: 100%
}

li {
  width: 32%;
  display: flex;
  font-size: 0;
  border: 1px solid gray;
  vertical-align: top;
}

.img {
  max-height: 220px;
  display: flex;
  overflow: hidden;
}

a {
  display: inline-block;
}

img {
  width: 100%;
  height: 100%;
}
<section class="news">
  <div class="wrapper">
    <ul>
      <li>
        <div class="img">
          <a href="#"><img src="http://ru.fishki.net/picsw/052013/16/auto/ferrari/auto-003.jpg" alt=""></a>
        </div>
        <h3><a href="#">Title</a></h3>
      </li>
      <li>
        <div class="img">
          <a href="#"><img src="http://xn--45-6kc5ak0bf.xn--p1ai/wa-data/public/shop/products/86/68/6886/images/5672/5672.750.jpg" alt=""></a>
        </div>
        <h3><a href="#">Title</a></h3>
      </li>
    </ul>
  </div>
</section>

11
  • вы хоть смотрели что получилось? По высоте изображения растянуты. Этого не должно быть.
    – word
    25 июл 2017 в 14:01
  • @word, должно обрезаться?
    – Yuri
    25 июл 2017 в 14:04
  • @Yuri, пусть обрезается, но желательно как-то контролировать, где будет обрезаться: снизу или сверху. Или пусть большее изображение будет отцентрировано по вертикали. А как вы посоветуете сделать? Если не обрезать тогда в любом случае будет разная высота?
    – word
    25 июл 2017 в 14:06
  • В любом же случае одно из изображений измениться. Растянеться, сожметься, обрежеться 25 июл 2017 в 14:08
  • @Назар Калитюк, да изменится, но это не вариант, чтобы изображение было растянуто. Пусть тогда обрезается снизу, т.е. чтобы изображение с большей высотой стало по высоте таким же, как меньшее изображение при масштабировании
    – word
    25 июл 2017 в 14:11

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.