Question

如何从图库中制作图像大小相同？（如果最初他们有不同的尺寸）。

在此处添加图像说明

<div class="img">
<a target="_blank" href="https://unsplash.it/g/300/400">
  <img src="https://unsplash.it/g/200/300" alt="Forest" width="600"  height="400">
</a>
  <div class="desc">Add a description of the image here</div>
 </div>
    <div class="img">
   <a target="_blank" href="https://unsplash.it/g/400/400">
  <img src="https://unsplash.it/g/400/400" alt="Northern Lights" width="600"height="400">
</a>
<div class="desc">Add a description of the image here</div>
 </div>

  <div class="img">
<a target="_blank" href="https://unsplash.it/g/400/400">
  <img src="https://unsplash.it/g/400/400" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
 </div>
 <div class="img">
<a target="_blank" href="https://unsplash.it/g/400/400">
  <img src="https://unsplash.it/g/400/400" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>

Answer 1

更新Css 在Css中添加https://www.example.com/test.php类。并移除img类

中的height :auto

注意：您可以改变Hight＆amp;宽度在Css

div.img img

查看实时演示 Here

下面的代码段示例

img
{
  width:300px;
  height:200px;
}
div.img img
{
 width: 100%;
}

div.img {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
}

div.img:hover {
  border: 1px solid #777;
}

div.img img {
  width: 100%;
}

div.desc {
  padding: 15px;
  text-align: center;
}
img
{
  width:300px;
  height:200px;
}

Answer 2

这取决于您希望如何调整大小不同的那些。换句话说，如果您有300x200图像和300x300图像，则可以：

将300x200伸展到300x300，这会使其看起来扭曲
将300x200一个放大，这样它足够大，可以填充300x300的盒子，然后裁剪或隐藏多余的
将300x200保持在正常尺寸，但将其放在300x300的盒子中，上面和下面有一些空白
裁剪300x300的顶部和底部，使其也是300x200

这些都是你拥有的所有选项，并且它们的实现方式略有不同，所以首先找出你想要的方式。

html中的图片库。如何使图像看起来大小相同？

2 个答案: