it-roy-ru.com

Как я могу сделать все изображения разной высоты и ширины одинаковыми с помощью CSS?

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

Я думал о создании div, который имеет высоту и ширину 100px, а затем немного, как его заполнить. Не уверен, как это сделать. 

Как я могу сделать это?

50
ariel

.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>

109
Simon Arnold

могу ли я просто добавить, что если вы слишком сильно искажаете свои изображения, то есть вынимаете их из пропорции, они могут выглядеть неправильно, крошечное количество - это хорошо, но один из способов сделать это - поместить изображения в «контейнер» и установите для контейнера значение 100 x 100, затем установите для своего изображения переполнение, и установите минимальную ширину для максимальной ширины контейнера, хотя это немного обрезает изображение, 

например 

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

Таким образом, изображение останется размером своего контейнера, но изменит размер, не нарушая ограничений. 

25
Andi Wilkinson

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

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

}
13
Manoj Selvin

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

В приведенном выше примере: красный - это пейзаж, зеленый - портрет, а синий - квадратное изображение. Клетчатый узор состоит из квадратов 16x16px.

8
Salman A

Для тех, кто использует Bootstrap и не хочет терять отзывчивость, просто не устанавливайте ширину контейнера. Следующий код основан на записи gillytech.

index.hmtl

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

style.css

/*images with the same width*/
.crop {
    height: 300px;
    /*width: 400px;*/
    overflow: hidden;
}
.crop img {
    height: auto;
    width: 100%;
}

ИЛИ style.css

/*images with the same height*/
.crop {
    height: 300px;
    /*width: 400px;*/
    overflow: hidden;
}
.crop img {
    height: 100%;
    width: auto;
}
3
Sven Ya

Установить параметры высоты и ширины в файле CSS

.ImageStyle{

    max-height: 17vw;
    min-height: 17vw;
    max-width:17vw;
    min-width: 17vw;
    
}

1
Ema

Вы можете сделать это следующим образом:

 .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%;
}
1
Arun ks

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

Я придумал это решение, которое использует немного 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: вам может понадобиться добавить некоторые префиксы или использовать автоматический префикс.

0
rafaelbiten

Без кода вам трудно помочь, но вот несколько практических советов для вас:

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

например:

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

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

0
fredsbend

Размер изображения не зависит от высоты и ширины div,

использовать элемент img в css

Вот код CSS, который поможет вам

div img{
         width: 100px;
         height:100px;
 }

если вы хотите установить размер с помощью div

использовать этот

div {
    width:100px;
    height:100px;
    overflow:hidden;
}

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

0
asad raza

Основываясь на ответе Энди Уилкинсона (второй), я немного улучшился, убедившись, что центр изображения показан (как это сделал принятый ответ):

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+ */
}
0
Alexee

Перейдите к файлу CSS и измените размер всех ваших изображений следующим образом

img {
  width:  100px;
  height: 100px;
}
0
bakslash
.article-img img{ 
    height: 100%;
    width: 100%;
    position: relative;
    vertical-align: middle;
    border-style: none;
 }

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

0
Manav Kothari