Question

我有一个固定尺寸的包装，里面有图像：

.wrapper {
  background: yellowgreen;
  width: 8em;
  height: 8em;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(11em / 12);
}

.wrapper img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border: calc(1em / 12) solid black;
  border-radius: calc(11em / 12);
}

This is ok:<br>
<div class="wrapper"><img src="https://audiophilesoft.ru/ASIO4ALL/asio4all.png" alt=""></div><br>

This is not ok:<br>
<div class="wrapper"><img src="https://audiophilesoft.ru/design/icons/go.png" alt=""></div>

我需要任何图像来适应包装 - 最大尺寸可用，保持比例，不需要剪切，我需要图像边框始终坚持图像轮廓（图像之间没有任何间隙）和边界）。现在它仅适用于尺寸为＆gt; =包装尺寸的图像，小图像不能缩放。如果我指定宽度/高度而不是max- *，则边框变得固定并且不会粘到图像轮廓（边框和图像之间存在垂直或水平间隙）。怎么做到这一点？也许一些CSS技巧，额外的包装？实际上对象适合我需要的工作，我只需要坚持图像的边框。

Answer 1

分别在width中将height和max-width更改为max-height和.wrapper：

在.wrapper img选择器中执行反转：

.wrapper {
    max-width: 8em;
    max-height: 8em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border: calc(1em / 12) solid black;
    border-radius: calc(11em / 12);
}

<div class="wrapper"><img src="https://images.tcdn.com.br/img/arquivos/355878/images/icons/us-flag.png?v=c4a83628611cc4338b8d08bee8d670ae" alt=""></div>

原始图片为32x16：link

Answer 2

正如所指出的那样，我以前的解决方案并不是OP真正寻求的，所以我已经用我认为的解决方案更新了下面的答案。这也适用于foreach ($results as $row) { print $row['dd'] ."</br>"; } // Outputs 2007-02-01 00:00:00 2007-02-02 00:00:00 2007-02-03 00:00:00 2007-02-04 00:00:00 ...。

我添加了一个名为display:flex的额外div，以确保边框始终完全包围图片，并且不会溢出容器。

.inner-wrap

.wrapper {
  background: yellowgreen;
  width: 8em;
  height: 8em;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(11em / 12);
  overflow:hidden;
  box-sizing:border-box;
}

.wrapper img {
  max-height:100%;
  width:100%;
  display:block;
}
.inner-wrap{
  width: 100%;
  max-height: 100%;
  border:2px solid red;
  border-radius: calc(11em / 12);
  box-sizing:border-box;
  overflow:hidden;
}

将图像缩放到最大尺寸以适合容器

2 个答案: