Question

我尝试了许多方法来实现这一目标，但没有成功。

基本上，我希望在图像下面有一个图像和文本的div元素（如卡片），目标是使其响应，以便当用户缩小浏览器或使用手机时，整个div不会搞砸但保持其比例。目标是在3x3矩阵中设置多个类似卡片的div。要求是，无论有什么图像，它只是填充容器 - 如果图像太大，图像不应该保持其纵横比，它应该总是一个squere。

link to current state*

（*它说我的级别太低，无法在帖子中显示图片）

正如你所看到的，当前的问题是图像本身没有填充容器，但保持纵横比，这意味着整个容器div是不同的高度，它被推到另一条线而不是3x3。就我而言。

代码在这里：

.box {
  max-width: 120px;
  max-height: 120px;
}

.card-image {
  width: 100%;
  height: 100%;  
  max-width: 90px;
  max-height: 90px;
  border: 1px solid black;
}

<div class="box">
  <img ng-src="{{item.img}}" ng-if="item.img" class="app-image" />
  <div style="font-size:80%;">{{item.name}}</div>
</div>

我使用角度来填充图像，但这应该对解决方案没有影响。据我所知，通过在这些css参数中添加＆＃34; vw＆＃34;来设置宽度和高度不是最好的方法，因为它保持这些值固定并且不是真正的响应

所以，在一天结束时，有两种方法可以帮助我： 1）使用当前的代码，添加一些css，使图像伸展高度，使其与宽度相同 2）建议更优化的解决方案

谢谢

Answer 1

.card-image {
  width: 100%;
  height: 100%;  
  max-width: 90px;
  max-height: 90px;
  border: 1px solid black;
  object-fit:fill; /* try fill,cover,contain for different results*/
}

了解更多信息Object fit CSS tricks

Answer 2

我认为最简单的方法，具有良好的浏览器兼容性将是这样的：

.item {
  width: 30%;
  height: 0;
  padding-top: 30%;
  display: inline-block;
  background-size: cover;
  background-position: center;
}

.container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  
  resize: both;
  overflow: auto;
}

<div class="container">
  <div class="item" style="background-image: url(https://dummyimage.com/600x400/000/fff)"></div>
  <div class="item" style="background-image: url(https://dummyimage.com/400x400/000/fff)"></div>
  <div class="item" style="background-image: url(https://dummyimage.com/300x400/000/fff)"></div>
</div>

图像将始终填满整个容器，容器将保持比例。您需要对多行布局进行一些工作，但我仍然认为这是最简单的方法。

用响应式图像填充响应div

2 个答案: