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

107

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

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

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

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

Beaniie
источник

Ответы:

185

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

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

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

Пример:

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;
}
jackJoe
источник
42

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

Например

 height: 120px;
 width: auto;

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

overflow: hidden; 

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

Ник Андриопулос
источник
Я пробовал это, но он по-прежнему дает мне изображения разных размеров и форм. Я хочу, чтобы галерея была единообразной, вот так, [] [] [] [] не как [] [] [] [] []
Beaniie
2
используйте комбинацию обоих вышеперечисленных: установите высоту равной числу (с автоматической шириной для сохранения масштаба) и ограничьте родительскую ширину определенной шириной, overflow: hiddenчтобы обрезать лишнее,
Ник Андриопулос
25

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

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

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

dmitry_romanov
источник
Спасибо, хорошее решение. :)
Bibhu
Как-то странно отвечать со свойством, которое поддерживается только в Opera ATM ?! caniuse.com/object-fit
Саймон Драгсбек
4
Я понимаю вашу точку зрения, @Simon, спасибо. Я упомянул, что понятия не имею, будет ли это свойство поддерживаться повсюду, но даже если этого не произойдет , мы можем использовать его в качестве отправной точки для поиска альтернатив, которые заменят его в Google . Еще одна причина для публикации заключается в том, что ответ будет оставаться в течение некоторого времени, пока браузеры становятся лучше с каждым днем, поэтому я ответил, что ориентируясь также на это ближайшее будущее .
dmitry_romanov
1
Зайдя на эту страницу несколько лет спустя, я был счастлив найти этот «будущий» ответ!
petzi
8

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

/* 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>

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

ДикиМальчик
источник
2

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

  1. Изображение не будет обрезано
  2. Соотношение сторон также останется прежним.

HTML:

<div id="app">
    <div id="container">
      <img src="#" alt="something">
    </div>
    <div id="container">
      <img src="#" alt="something">
    </div>
    <div id="container">
      <img src="#" alt="something">
    </div>
</div>

CSS:

div#container {
    height: 200px;
    width: 200px;
    border: 1px solid black;
    margin: 4px;
}
img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: 0 auto;
}
Бхушан Дангор
источник
-1

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

<div>
   <div style="padding-bottom: 33%;">
      i have 33% height of my parents width
   </div>
</div>
восстанавливать
источник