Question

首先，我对CSS并不是很好，但是我试图仅使用CSS使<img>高度等于它的宽度。我也使用 bootstrap ，如下所示，因此每列的宽度都是响应的。

＆＃13;

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';

.album .album_photo .photo_link img {
  width: 100%;
}

＆＃13;

<div class="album">
  <div class="col-xs-3">
    <div class="album_photo">
      <a href="#" class="photo_link">
        <img src="someurl" />
      </a>
    </div>
  </div>
  <div class="col-xs-3">
    <div class="album_photo">
      <a href="#" class="photo_link">
        <img src="someurl" />
      </a>
    </div>
  </div>
</div>

＆＃13;

这就是现在看起来的方式：

这就是我尝试实现的原因：

Answer 1

考虑将图像与background-size: cover结合使用作为背景。

Answer 2

看看这支笔，你会知道如何使用 padding-bottom 技巧做到这一点： Code pen

.album_photo {
   position: relative;
   padding-bottom: 100%;
   overflow: hidden;
}

img {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

Answer 3

我喜欢这种方法。它使列的内容（在本例中为.album_photo）position: relative设置元素的内包装（＆＃39; .photo_link img＆＃39;）position: absolute;的高度100%。要保持列的形状，请使用具有padding-top: 100%的伪元素。这有效的原因是因为基于百分比的填充总是相对于元素的宽度。因此，使用100%的填充，它总是和它一样高。您也可以使用相同的方法创建基于比率的容器大小（例如，对于具有绝对定位的幻灯片的幻灯片，比例为3：1）。这是一个巧妙的伎俩。

＆＃13;

@import url(https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css);

.album_photo {
  position: relative;
  overflow: hidden;
}

.photo_link img {
  position: absolute;
  top: 0;
  left: 0;
}

.album_photo:after {
  content: '';
  display:inline-block;
  vertical-align: top;
  width: 100%;
  height: 0;
  padding-top: 100%;
}

＆＃13;

<div class="container">
  <div class="album">
    <div class="col-xs-3">
      <div class="album_photo">
        <a href="#" class="photo_link"><img src="//placehold.it/300x200" /></a>
      </div>
    </div>
    <div class="col-xs-3">
      <div class="album_photo">
        <a href="#" class="photo_link"><img src="//placehold.it/300x200" /></a>
      </div>
    </div>
    <div class="col-xs-3">
      <div class="album_photo">
        <a href="#" class="photo_link"><img src="//placehold.it/300x200" /></a>
      </div>
    </div>
    <div class="col-xs-3">
      <div class="album_photo">
        <a href="#" class="photo_link"><img src="//placehold.it/300x200" /></a>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 4

您希望“album_photo”类的宽度和高度为100％，因为这些将填充父元素中具有“col-xs-3”类的空间

CSS：

  .album_photo {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

将margin和padding设置为0，您将看到img非常适合父元素。

Answer 5

您可以通过简单地应用宽度和宽度来以任何方式缩放图像。高度。例如，您可以说

.full-width-height { width: 100%; height: 100%; }

您还可以使用min-width，max-width，min-height和max-height。

但是，你会遇到纵横比问题。

您有两个选项可以使用CSS和

来检查宽高比

.auto-width { width: auto; height: xxx; } 
.auto-height { width: xxx; height: auto; }

Bootstrap提供了一个可以使用的响应类。该课程 img-responsive ，您可以阅读here。此类通常与 center-block 辅助类一起使用。

<img/>高度等于div内的宽度

5 个答案: