Изменение размеров изображения пропорционально с помощью CSS?
Я уже пару дней пытаюсь настроить галерею миниатюр, чтобы все изображения отображались одинаковой высоты и ширины. Однако, когда я меняю код Css на,
max-height: 150px;
max-width: 200px;
width: 120px;
height: 120px;
Я получаю изображения одинакового размера, но соотношение сторон растягивается, разрушая изображения. нет ли способа изменить размер контейнера изображения, а не изображения? что позволяет мне сохранять пропорции. но изменить размер изображения по-прежнему. (Я не возражаю, если я отрежу часть изображение.)
спасибо заранее!
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;
}
вам нужно исправить одну сторону (например, высоту ) и установить другую в auto
.
например
height: 120px;
width: auto;
это будет масштабировать изображение только с одной стороны. Если вы считаете обрезку изображения приемлемой, вы можете просто установить
overflow: hidden;
родительскому элементу, который будет обрезать все, что в противном случае превысит его размер.
можно использовать 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 также можно найти там.
чтобы сделать изображения регулируемыми / гибкими, вы можете использовать это:
/* fit images to container */
.container img {
max-width: 100%;
height: auto;
}
поместите его в качестве фона на свой держатель, например
<div style="background:url(path/to/image/myimage.jpg) center center; width:120px; height 120px;">
</div>
это будет центрировать ваше изображение внутри 120x120 div отсечения любого избытка изображения
Если вы знаете коэффициент spect, вы можете использовать padding-bottom с процентом, чтобы установить высоту в зависимости от С diff.
<div>
<div style="padding-bottom: 33%;">
i have 33% height of my parents width
</div>
</div>