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

【问题标题】：Image gallery in html. How to make images appear the same size?html 中的图片库。如何使图像看起来相同大小？
【发布时间】：2017-02-27 04:39:29
【问题描述】：

如何使图片库中的图片大小相同？（如果最初它们具有不同的尺寸）。

jsfiddle.net

在此处添加图像描述

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

【问题讨论】：

标签： css image size gallery

【解决方案1】：

更新 Css 在 Css 中添加 img 类。并删除div.img img 类中的height :auto

注意：您可以在 Css 中更改高度和宽度

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

观看现场演示 Here

以下片段示例

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>

【讨论】：

【解决方案2】：

这取决于您要如何调整大小不同的那些。换句话说，如果你有一张 300x200 的图片和一张 300x300 的图片，你可以：

将 300x200 的一个拉伸到 300x300，这会使它看起来失真
将 300x200 放大一个，使其足以填充 300x300 的框，然后裁剪或隐藏多余的部分
保持 300x200 的正常大小，但将其放入 300x300 的盒子中，上下留一些空白
裁剪 300x300 的顶部和底部，使其也是 300x200

这些都是您拥有的选项，它们的实施方式都会有所不同，所以首先要弄清楚您想走哪条路。

【讨论】：