Question

我希望我的所有图片在我的主页上都是相同的尺寸。但是当我添加照片时，有些高度并不相同。我希望他们在没有拉伸的情况下都是一样的，而是通过填充和裁剪。我该怎么做呢？谢谢！

img {
  overflow: hidden;
  max-width: 100%;
  height: auto;
  margin: 0 0 10px 0;
}

<div class="thirds clearfix">

  <!-- one-third -->
  <div class="one-third mobile-collapse">
    <a href="thetrainer.html">
      <img src="http://i66.tinypic.com/vnfcro.jpg" width="400px" height="400px">
    </a>
    <h2>The Trainer</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <div class="button1">
      <a href="thetrainer.html"><img src="http://i66.tinypic.com/33kakow.png"></a>
    </div>
  </div>
  <!--/one-third-->

  <!-- one-third -->
  <div class="one-third one-third-second mobile-collapse">
    <a href="lessons.html">
      <img src="http://static1.squarespace.com/static/5461836ee4b073a05b541f40/t/548df630e4b023e5238f8546/1418589745114/0image.jpg" width="400px" height="400px">
    </a>
    <h2>Lessons</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <div class="button2">
      <a href="lessons.html"><img src="http://i66.tinypic.com/33kakow.png"></a>
    </div>
  </div>
  <!--/one-third-->

  <!-- one-third -->
  <div class="one-third one-third-last mobile-collapse">
    <a href="training.html">
      <img src="http://i68.tinypic.com/2rel7rd.jpg" height="400px" width="400px">
    </a>
    <h2>Training</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <div class="button3">
      <a href="training.html"><img src="http://i66.tinypic.com/33kakow.png"></a>
    </div>
  </div>
  <!--/one-third-->

</div>
<!--/thirds-->

Answer 1

仅CSS解决方案将要求您将put图像添加为具有background-size: cover样式的div的背景图像。

所以你的锚标签应该有这些样式：

background-image: url('link-to-image.png');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;

请注意，您的锚标记应具有高度和宽度，以将图像显示为背景。

Answer 2

另一种方法是使用图像作为背景。在HTML中使用div代替img，并使用background-image作为图片...由于您有多个图片，因此必须为background-image编写内联css

将width和height设置为图片会拉伸您的图片......

Stack Snippet

＆＃13;

.image-wrapper {
  height: 400px;
  width: 400px;
  background-size: cover;
  background-position: center center;
}

＆＃13;

<div class="thirds clearfix">
  <div class="one-third mobile-collapse">
    <a href="thetrainer.html">
      <div class="image-wrapper" style="background-image:url(http://i66.tinypic.com/vnfcro.jpg)"></div>
    </a>
    <h2>The Trainer</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <div class="button1">
      <a href="thetrainer.html"><img src="http://i66.tinypic.com/33kakow.png"></a>
    </div>
  </div>
  <div class="one-third one-third-second mobile-collapse">
    <a href="lessons.html">
      <div class="image-wrapper" style="background-image:url(http://static1.squarespace.com/static/5461836ee4b073a05b541f40/t/548df630e4b023e5238f8546/1418589745114/0image.jpg)"></div>
    </a>
    <h2>Lessons</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <div class="button2">
      <a href="lessons.html"><img src="http://i66.tinypic.com/33kakow.png"></a>
    </div>
  </div>
  <div class="one-third one-third-last mobile-collapse">
    <a href="training.html">
      <div class="image-wrapper" style="background-image:url(http://i68.tinypic.com/2rel7rd.jpg)"></div>
    </a>
    <h2>Training</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <div class="button3">
      <a href="training.html"><img src="http://i66.tinypic.com/33kakow.png"></a>
    </div>
  </div>
</div>

＆＃13;

Answer 3

一个选项是定义图像的自定义宽度和高度。例如：在你的css文件中定义这样的css ..

.ImageDefault{
    width:100px;
    height: 100px;
}

在图像使用中：

<img src="some path" class="ImageDefault"/>

使图像大小相同

3 个答案: