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 без переполнения и отцентрируйте, отрегулировав поля, если необходимо.

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

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

— Бхушан Дангор
источник

0

transform: scale(0.5);

Пример:

<div>Normal</div>
<div class="scaled">Scaled</div>

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */
  background-color: pink;
}

см. https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale

— Махмуд К.
источник

-1

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

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

— восстанавливать
источник

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

HTML:

CSS:

Пример: