Question

我有以下问题。

我有一排290px x 160px的正方形，假设显示带有div的图像。

<div class="33percentWidth">
<img src="./img1" class="???" />
</div>

<div class="33percentWidth">
<img src="./img2" class="???" />
</div>

<div class="33percentWidth">
<img src="./img3" class="???" />
</div>

问题是如果图像更大（超过290像素x 190像素;这会增大高度或宽度。

问题：我如何定义我的img类，以便图像居中（和缩放）以适合290x190平方，并且我确定使用＆＃34;列＆＃34;会坚持下去吗？

Answer 1

您可以使用CSS

.classname{
  max-width :290px;
  max-height:190px;
  align-content: center;
}

Answer 2

如果你给img标签赋予宽度，那么它将自动适合你的列。

<style>
 .imgclass{
 height:160px;
 width:290px; 
 }
 .divclass{
  text-align:center; 
 }
 </style>
 <div class="divclass">
  <img src="./img1" class="imgclass" />
 </div>

Answer 3

我认为最好让图片在div中对其自身的宽高比进行排序。

因此，为了确定尺寸，我会：

.class { max-width: 100%; height: auto}

要使图像居中，您可以使用：

.parent { text-align: center}

或

Img {display: block; margin: 0 auto;}

但是最后一种方法只有img小于父

才有用

Answer 4

调整div和max-width img

的大小

.percentWidth {
  display: inline-block;
  width: 260px;
  height: 190px;
  line-height: 190px;
  border: solid 1px black;
  vertical-align: top;
  text-align: center;
  position: relative;
}
.percentWidth>img {
  max-width: 260px;
  max-height: 190px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

<div class="percentWidth">
  <img src="http://placehold.it/260x190&text=same" />
</div>

<div class="percentWidth">
  <img src="http://placehold.it/200x100&text=smaller" />
</div>

<div class="percentWidth">
  <img src="http://placehold.it/280x200&text=bigger" />
</div>

使用CSS在div中进行图像对齐

4 个答案: