图像缩放不好

Question

我有一个Directory.GetDirectories(PathToFolder).Select(d => new DirectoryInfo(d).Name); ，其中包含动态生成的图像，现在每个图像都有不同的比例，现在我的图像没有按图像比例缩放。

预期结果：

到目前为止，这是我的解决方法

library(stringr)

df$num <- str_extract(df$string, '\\d\\d\\d\\d') # first pattern
df$num <- str_extract_all(df$string, '\\d\\d\\d\\d') # all patterns

div

这是jsfiddle live demo

我需要怎么做才能解决这个问题？

Answer 1

如果您希望图像具有响应性，则必须设置：

max-width:100%;
max-height: 100%;

代替width和height。

还删除不需要的绝对职位

演示：

.container {
  display: flex;
  justify-content: space-between;
}

.conatiner_box {
  position: relative;
  width: 300px;
  height: 150px;
  border: 1px solid;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  position: relative;
  border-left: 5px solid rgb(232, 159, 42);
  margin: 0px auto;
  overflow: hidden;
}

.image-box {
  max-width: 100%;
  max-height: 100%;
  /*position: absolute;
  left: 0px;
  top: 0px;
  bottom: 0px;
  right: 0px;*/
  transition: all 0.1s linear 0s;
}

<div class="container">
   <div class="conatiner_box">
      <img src="https://i.ibb.co/HP3tksz/image1.jpg" class="image-box">
   </div>
   <div class="conatiner_box">
      <img src="https://i.ibb.co/Jz9cW7W/image2.jpg" class="image-box">
   </div>
</div>

Answer 2

我猜想css是从以前的容器及其类继承而来的，即图像框“宽100％，高100％”就是使图像像垃圾一样缩放的原因。

您要告诉图像始终保持父容器宽度和高度的100％，这意味着如果盒子歪斜了，图像将按照这些比例拉伸。

这只是一个猜测。

Answer 3

您应该从.image-box中删除position：absolute，并删除display：flex;来自.conatiner_box。图像的宽度也应为：100％；和高度：自动； 如果要使所有框具有相同的尺寸，则应定义宽度和高度并使用object：fit;这样，您可以将其与CSS中的背景图像一样对待（但在Internet Explorer中将不起作用，请选中caniuse）。

此外，您应该尝试使用比例相似的图像来获得更好的用户界面。