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

Question

How to make images from image gallery appear same size? 如何使图像库中的图像看起来相同大小？ (if originally they have different dimensions). （如果它们最初具有不同的尺寸）。

jsfiddle.net jsfiddle.net

Add a description of the image here 在此处添加图片说明

 <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

Update Css Add img Class In Css. 更新CSS在CSS中添加img类。 And Remove height :auto in div.img img Class 并删除height :auto div.img img类中的height :auto

Note: You Can Change Hight & width in Css 注意：您可以更改CSS的高度和宽度

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

See Live Demo Here 在这里 观看现场演示

Snippet Example Below 下面的代码段示例

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

 <!DOCTYPE html> <body> <div class="img"> <a target="_blank" href="https://unsplash.it/200/300/?random"> <img src="https://unsplash.it/200/300/?random" alt="Trolltunga Norway" > </a> <div class="desc">Add a description of the image here</div> </div> <div class="img"> <a target="_blank" href="https://unsplash.it/g/300/400"> <img src="https://unsplash.it/g/200/300" alt="Forest" > </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" > </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" > </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" > </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" > </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" > </a> <div class="desc">Add a description of the image here</div> </div>

Answer 2

That depends on how you want to adjust the ones that aren't the same size. 这取决于您要如何调整大小不同的那些。 In other words, if you have a 300x200 image and a 300x300 image, you could: 换句话说，如果您有300x200的图片和300x300的图片，则可以：

stretch the 300x200 one out to 300x300, which would make it look distorted 将300x200拉伸到300x300，这会使它看起来失真
scale the 300x200 one up so it's large enough to fill a 300x300 box, then crop out or hide the excess 将300x200放大一倍，使其足够填满300x300的盒子，然后裁剪或隐藏多余的盒子
keep the 300x200 one at its normal size but put it in a 300x300 box with some whitespace above and below it 将300x200的像素保持其正常大小，但将其放在300x300的框中，上方和下方都有一些空白
crop the top and bottom of the 300x300 one so it's also 300x200 剪裁300x300像素的顶部和底部，所以它也是300x200

These are all options you have and they'd all be implemented a little differently, so first figure out which way you want to go. 这些都是您所拥有的选项，并且它们的实现方式都将有所不同，因此首先要弄清楚您想采用哪种方式。

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

问题描述

2 个解决方案

解决方案1
1 2016-10-18 04:00:16

解决方案2
0 2016-10-18 04:28:24

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

问题描述

2 个解决方案

解决方案1 1 2016-10-18 04:00:16

解决方案2 0 2016-10-18 04:28:24

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

解决方案1
1 2016-10-18 04:00:16

解决方案2
0 2016-10-18 04:28:24