logo标签列表

<div>中<img>的高度等于宽度

htmlcss
4

首先，我并不是很擅长CSS，但我正在尝试仅使用CSS使<img>的高度等于其宽度。

我还在使用Bootstrap，如下所示，因此每个列的宽度都是响应式的。

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';

.album .album_photo .photo_link img {
  width: 100%;
}
<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>

这是当前的显示效果： enter image description here 这是我想要达到的效果： enter image description here
请创建一个 fiddle 或 codepen。我会帮你修复它。我需要了解你当前的课程。你发布的代码不够。 - Mojtaba
@Mojtaba 抱歉，我更新了我的问题。顺便说一下，你和我同名 :) - Sayed
没有问题。重要的是你找到了答案。附言：你是个幸运的人 ;) - Mojtaba
@Mojtaba，看起来我没有找到答案。 - Sayed
好的，我编辑了Joseph的答案。现在应该是你想要的了。 - Mojtaba
6个回答
4

看看这支笔，你可以使用 padding-bottom 技巧来实现它： Code pen

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

img {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}
1
这并没有解决宽高比问题。 - Sayed
1
我有这个想法，但如果我能用<img>标签来实现它会更好。 - Sayed
1
我喜欢这种方法。它使得列的内容（在本例中为.album_photo）position: relative，将元素的内部包装器（'.photo_link img'）设为position: absolute;，高度为100%。为了保持列的形状，使用一个伪元素，它具有padding-top: 100%。这个方法有效的原因是基于百分比的填充始终相对于元素的宽度。因此，使用100%的填充，它的高度将始终与宽度相同。您也可以使用相同的方法创建基于比率的容器大小（例如，绝对定位幻灯片的3:1比率）。这是一个巧妙的技巧。 

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

@sayed 很棒！很高兴能帮助到你。 - Joseph Marikle
看起来，如果混合使用不同方向的图像，则此方法无法正常工作，而background-size: cover则可以不考虑图像方向正常工作。 - Marat Tanalin
@MaratTanalin 没错！Joseph，有解决方案吗？还是我只能采用后台方式？！ - Sayed
@sayed 如果你想要适应纵向图片，只需在.photo_link img中将height改为width，并使用top:50%、left:0和transform: translateY(-50%)即可。但是，我不知道有没有办法用这种方法来适应横向和纵向图片而不使用逻辑语言（而不是CSS）来首先检查方向。如果你想要这种灵活性，你就必须放弃img标签的语义优势，并将你的图像链接硬编码为内联样式的背景图像。这实际上取决于你的应用程序业务逻辑的具体情况。 - Joseph Marikle
@sayed 我撤回之前的说法...这可能是有可能的。我会更新我的答案。 - Joseph Marikle
@sayed 不，没事了。用我想到的方法无法扩展。 - Joseph Marikle
0

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

.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，您可以在这里阅读有关它的信息。这个类通常与center-block辅助类一起使用。

-1
你想让 "album_photo" 类的宽度和高度都是100％，因为它们会填满父元素中具有类名 "col-xs-3" 的空间。
CSS:
  .album_photo {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

将边距和填充设置为0，您会发现图像很好地适合父元素。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接