Я пытаюсь создать стену изображения, состоящую из фотографий продукта. К сожалению, все они имеют разную высоту и ширину. Как я могу использовать css, чтобы все изображения выглядели одинакового размера? предпочтительно 100 х 100.
Я думал о том, чтобы сделать div, который имеет высоту и ширину 100 пикселей, а затем некоторые, как заполнять его. Не уверен, как это сделать.
Как я могу это сделать?
.img {
position: relative;
float: left;
width: 100px;
height: 100px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
}<div class="img" style="background-image:url('http://i.imgur.com/tI5jq2c.jpg');"></div>
<div class="img" style="background-image:url('http://i.imgur.com/37w80TG.jpg');"></div>
<div class="img" style="background-image:url('http://i.imgur.com/B1MCOtx.jpg');"></div>Могу ли я просто добавить, что если вы слишком сильно искажаете свои изображения, то есть вынимаете их из соотношения, они могут выглядеть неправильно, - крошечная сумма в порядке, но один из способов сделать это - поместить изображения внутри 'container' и установите контейнер в 100 x 100, затем установите для вашего изображения значение переполнения none и установите минимальную ширину в максимальную ширину контейнера, это обрезает немного вашего изображения, хотя
например
<h4>Products</h4>
<ul class="products">
<li class="crop">
<img src="ipod.jpg" alt="iPod" />
</li>
</ul>
.crop {
height: 300px;
width: 400px;
overflow: hidden;
}
.crop img {
height: auto;
width: 400px;
}
Таким образом, изображение будет оставаться размером с его контейнером, но будет изменять размер без ограничений.
Простейший способ - это будет поддерживать размер изображения как есть, и заполнить другую область пространством, таким образом, все изображения будут занимать одно и то же заданное пространство независимо от размера изображения без растягивания
.img{
width:100px;
height:100px;
/*Scale down will take the necessary specified space that is 100px x 100px without stretching the image*/
object-fit:scale-down;
}
Вы можете использовать свойство object-fit для определения размера элементов img:
cover растягивает или сжимает изображение пропорционально, чтобы заполнить контейнер. При необходимости изображение обрезается по горизонтали или вертикали.contain растягивает или сжимает изображение пропорционально, чтобы поместиться внутри контейнера.scale-down изображения изображение пропорционально умещается в контейнере.
.example {
margin: 1em 0;
text-align: center;
}
.example img {
width: 30vw;
height: 30vw;
}
.example-cover img {
object-fit: cover;
}
.example-contain img {
object-fit: contain;
}<div class="example example-cover">
<img src="https://i.stack.imgur.com/B0EAo.png">
<img src="https://i.stack.imgur.com/iYkNH.png">
<img src="https://i.stack.imgur.com/gne9N.png">
</div>
<div class="example example-contain">
<img src="https://i.stack.imgur.com/B0EAo.png">
<img src="https://i.stack.imgur.com/iYkNH.png">
<img src="https://i.stack.imgur.com/gne9N.png">
</div>Для тех, кто использует Bootstrap и не хочет потерять отзыв, просто не устанавливайте ширину контейнера. Следующий код основан на сообщении gillytech.
<div id="image_preview" class="row">
<div class='crop col-xs-12 col-sm-6 col-md-6 '>
<img class="col-xs-12 col-sm-6 col-md-6"
id="preview0" src='img/preview_default.jpg'/>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
more stuff
</div>
</div> <!-- end image preview -->
/*images with the same width*/
.crop {
height: 300px;
/*width: 400px;*/
overflow: hidden;
}
.crop img {
height: auto;
width: 100%;
}
/*images with the same height*/
.crop {
height: 300px;
/*width: 400px;*/
overflow: hidden;
}
.crop img {
height: 100%;
width: auto;
}
Вы можете сделать это следующим образом:
.container{
position: relative;
width: 100px;
height: 100px;
overflow: hidden;
z-index: 1;
}
img{
left: 50%;
position: absolute;
top: 50%;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
max-width: 100%;
}
Задайте параметры высоты и ширины в файле CSS
.ImageStyle{
max-height: 17vw;
min-height: 17vw;
max-width:17vw;
min-width: 17vw;
}Размер изображения не зависит от высоты и ширины div,
использовать элемент img в css
Вот код css, который поможет вам
div img{
width: 100px;
height:100px;
}
если вы хотите установить размер с помощью div
используйте этот
div {
width:100px;
height:100px;
overflow:hidden;
}
этим кодом ваше изображение будет отображаться в исходном размере, но при первом переполнении 100x100px скрывается
Без кода вам сложно помочь, но вот вам некоторые практические советы:
Я подозреваю, что ваша "стена изображения" имеет своего рода контейнер с идентификатором или классом, чтобы придать ему стили.
например:
<body>
<div id="maincontainer">
<div id="header"></div>
<div id="content">
<div id="imagewall">
<img src"img.jpg">
<!-- code continues -->
Упорядочение размера на всех изображениях для вашей стены изображения, не влияя на другие изображения, такие как логотип и т.д., легко, если ваш код настроен аналогично приведенному выше.
#imagewall img {
width: 100px;
height: 100px; }
Но если ваши изображения не являются полностью квадратными, они будут искажены с помощью этого метода.
Перейдите в свой CSS файл и измените размер всех ваших изображений следующим образом
img {
width: 100px;
height: 100px;
}
Я искал решение для этой же проблемы, чтобы создать список логотипов.
Я придумал это решение, которое использует бит flexbox, который работает для нас, так как мы не беспокоимся о старых браузерах.
В этом примере предполагается окно размером 100x100 пикселей, но я уверен, что размер может быть гибким/отзывчивым.
.img__container {
display: flex;
padding: 15px 12px;
box-sizing: border-box;
width: 100px; height: 100px;
img {
margin: auto;
max-width: 100%;
max-height: 100%;
}
}
ps: вам может потребоваться добавить некоторые префиксы или использовать autoprefixer.
На основе ответа Анди Уилкинсона (второй), я немного поправился, убедитесь, что центр изображения показан (как и принятый ответ):
HTML:
<div class="crop">
<img src="img.png">
</div>
CSS
.crop{
height: 150px;
width: 200px;
overflow: hidden;
}
.crop img{
width: 100%;
height: auto;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
-ms-transform: translateY(-50%); /* IE 9 */
transform: translateY(-50%); /* IE 10, Fx 16+, Op 12.1+ */
}
.img {
position: relative;
float: left;
width: 100px;
height: 100px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
}<div class="img" style="background-image:url('http://i.imgur.com/tI5jq2c.jpg');"></div>
<div class="img" style="background-image:url('http://i.imgur.com/37w80TG.jpg');"></div>
<div class="img" style="background-image:url('http://i.imgur.com/B1MCOtx.jpg');"></div>.article-img img{
height: 100%;
width: 100%;
position: relative;
vertical-align: middle;
border-style: none;
}
Вы сделаете размер изображения таким же, как у div, и вы можете использовать загрузочную сетку, чтобы соответственно управлять размером div