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

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

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

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

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

75
css gallery html lightbox

6 ответов

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

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

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

Ex:

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;
}
137

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

например 

 height: 120px;
 width: auto;

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

overflow: hidden;

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

30

можно использовать 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>

это не совсем ваш ответ, хотя, из-за этого не растягивает контейнер, но он ведет себя как галерея, и вы можете продолжать стилизовать .

другим недостатком этого решения по-прежнему является плохая поддержка свойства css3. Более подробная информация доступна здесь: http://www.steveworkman.com/html5-2/javascript/2012/css3-object-fit-polyfill/. решение jQuery также можно найти там.

18

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

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

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

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

это будет центрировать ваше изображение внутри 120x120 div отсечения любого избытка изображения

5

Если вы знаете коэффициент spect, вы можете использовать padding-bottom с процентом, чтобы установить высоту в зависимости от С diff. 

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