Как выровнять изображения одного размера, используя CSS и HTML, а не масштабировать все изображения вручную? - PullRequest
Новая
       18

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

0 голосов
/ 24 марта 2020

Я пытался выровнять свои изображения к одному и тому же размеру, используя теги CSS и HTML, в настоящее время это то, что я придумал, есть только несколько изображений, которые не кажутся следовать указаниям. Я пробовал разные способы описания ширины (например, vw, hf, px или%), хотя эти теги, похоже, не решают проблему здесь полностью. Ширина в порядке, но высота на некоторых фотографиях нет. Все изображения имеют разные исходные размеры, только последние 3 изображения имеют одинаковый оригинальный размер.

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

Так выглядят изображения в настоящее время.

код 

.main-container {
max-width: 60%;
max-height: 44.44%;
margin-left: 19.6875%;
margin-top: 20%;
padding: 10px;
overflow: hidden;
background-color: #FEF39F;
}
.imgclass {
   border: 1px solid #ddd;
   border-radius: 4px;
   padding: 5px;
   max-width: 13.5vw;
   max-height: 15hz;
}
img.imgclass:hover {
   box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}

1 Ответ

0 голосов
/ 24 марта 2020

max-height и max-width будут только указывать, что изображение не должно быть больше, чем указанные высота и ширина соответственно. Попробуйте что-то вроде img { height: 200px; width: 100%}

Может быть, вы хотите сделать это: 

* {
  box-sizing: border-box;
}

/* Create four equal columns that floats next to each other */
.column {
  float: left;
  width: 25%;
  padding: 10px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
.column img{
  height: 250px;
  width: 100%;
}

@media screen and (max-width: 600px) {
  .column {
      width: 50%;
  }
  .column img {
      height: 180px;
      width: 100%;
  }
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<h2>Four Equal Columns</h2>

<div class="row">
  <div class="column">
   <img src="https://picsum.photos/600/600" >
  </div>
  <div class="column">
   <img src="https://picsum.photos/700/600" >
  </div>
  <div class="column">
   <img src="https://picsum.photos/600/600" >
  </div>
  <div class="column">
   <img src="https://picsum.photos/600/600" >
  </div>
</div>
<div class="row">
  <div class="column">
   <img src="https://picsum.photos/600/600" >
  </div>
  <div class="column">
   <img src="https://picsum.photos/400/600" >
  </div>
  <div class="column">
   <img src="https://picsum.photos/500/600" >
  </div>
  <div class="column">
   <img src="https://picsum.photos/600/600" >
  </div>
</div>

</body>
</html>
...