Изменение размеров изображений пропорционально с помощью CSS?

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

max-height: 150px;
max-width: 200px;
width: 120px;
height: 120px;

Я получаю изображения одинакового размера, но пропорции растягиваются, разрушая изображения. не существует способа изменить размер контейнера изображения, а не изображение? позволяя мне сохранить соотношение сторон. но измените размер изображения еще. (Я не против, если я отключу часть изображения.)

Спасибо заранее!

Ответы

Ответ 1

Это известная проблема с изменением размера CSS, если все изображения не имеют одинаковой пропорции, вы не можете сделать это с помощью CSS.

Лучшим подходом было бы иметь контейнер и изменять размер одного из размеров (всегда одинакового) изображений. В моем примере я изменил размер ширины.

Если контейнер имеет заданный размер (в моем примере - ширина), при указании изображения на ширину 100%, он сделает его полной шириной контейнера. auto на высоте сделает изображение имеющим высоту, пропорциональную новой ширине.

Пример:

HTML:

<div class="container">
<img src="something.png" />
</div>

<div class="container">
<img src="something2.png" />
</div>

CSS

.container {
    width: 200px;
    height: 120px;
}

/* resize images */
.container img {
    width: 100%;
    height: auto;
}

Ответ 2

Вам нужно зафиксировать одну сторону (например, высоту), а другую - auto.

 height: 120px;
 width: auto;

Это будет масштабировать изображение только на одной стороне. Если вы найдете обрезку изображения приемлемым, вы можете просто установить

overflow: hidden;

к родительскому элементу, который вырезает все, что иначе превысило бы его размер.

Ответ 3

Вы можете использовать свойство object-fit css3, что-то вроде

<!doctype html>
<html>

<head>
  <meta charset='utf-8'>
  <style>
    .holder {
      display: inline;
    }
    .holder img {
      max-height: 200px;
      max-width: 200px;
      object-fit: cover;
    }
  </style>
</head>

<body>
  <div class='holder'>
    <img src='meld.png'>
  </div>
  <div class='holder'>
    <img src='twiddla.png'>
  </div>
  <div class='holder'>
    <img src='meld.png'>
  </div>
</body>

</html>

Ответ 4

Чтобы сделать изображения регулируемыми/гибкими, вы можете использовать это:

/* fit images to container */
.container img {
    max-width: 100%;
    height: auto;
}

Ответ 5

Поместите его в качестве фона на ваш держатель, например.

<div style="background:url(path/to/image/myimage.jpg) center center; width:120px; height 120px;">
&nbsp;
</div>

Это центрирует ваше изображение внутри разделителя 120x120, прерывая любое превышение изображения.

Ответ 6

если вы знаете коэффициент отношения, вы можете использовать padding-bottom с процентом для установки высоты в зависимости от diff.

<div>
   <div style="padding-bottom: 33%;">
      i have 33% height of my parents width
   </div>
</div>