Question

这就是我要在纯CSS中完成的工作：

我有一个任意的div。我对它的布局一无所知，除了它的高度之外，它的高度足以容纳我要放入其中的内容。
特别是，要绝对明确地说，这意味着我不知道它的位置，内边距，边距，宽度等，因此，解决方案中的任何内容都不应取决于它们的特定值。

我获得了一个任意尺寸的图像文件（直接或间接）放置在div内。

CSS应该缩小图像以确保其宽度不超过其父图像的宽度。

CSS然后应将图像裁剪为圆形。

最后，我应该看到一个圆形图像适合div，没有任何纵横比失真，其尺寸都没有超出原始尺寸。

这就是我理想世界中的样子：

<!DOCTYPE html> <head> <style type="text/css"> img { max-width: 100%; max-height: width; /* I wish this was a thing... */ border-radius: 50%; object-fit: cover; } </style> </head> <body> Arbitrary content... <div style="width: 25%; margin-left: 10px; top: 1em;">  <img src="https://i.stack.imgur.com/8mNMb.png"/> </div> Arbitrary content... </body> </html>

现在显然这行不通，因为您无法执行height: width。

但是我该怎么办呢？我已经尝试了本书中的所有技巧，但最终都以某种方式失败了。这是一个height: 0; padding-bottom: 100%;技巧的示例：

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <style type="text/css"> .square { height: 0px; padding-bottom: 100%; } .circle { position: absolute; max-width: 100%; height: 100%; /* not really sure what to put here */ border-radius: 0%; object-fit: cover; } </style> </head> <body> Arbitrary content... <div style="width: 25%; margin-left: 50px; top: 1em;"> <div class="square"> <img class="circle" src="https://i.stack.imgur.com/8mNMb.png"/> </div> </div> Arbitrary content... </body> </html>

我该如何实现？

Answer 1

您的第二个片段很接近。您需要在方形容器上使用position:relative;，以便可以将圆的高度设置为该方形容器的100％。在img标签上使用object-fit: scale-down;似乎可以做到。

.circle {
  height: 0px;
  padding-bottom: 100%;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
}

.circle img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: scale-down;
}

Arbitrary content...
<div style="width: 25%; margin-left: 50px; top: 1em;">
  <div class="circle">
    <img src="https://i.stack.imgur.com/8mNMb.png" />
  </div>
</div>
Arbitrary content...
<div style="width: 250px;">
  <div class="circle">
    <img src="https://picsum.photos/68/50" />
  </div>
</div>
Arbitrary content...
<div style="width: 250px;">
  <div class="circle">
    <img src="https://picsum.photos/200/300" />
  </div>
</div>
Arbitrary content...
<div style="width: 250px;">
  <div class="circle">
    <img src="https://picsum.photos/300/200" />
  </div>
</div>
Arbitrary content...
<div style="width: 250px;">
  <div class="circle">
    <img src="https://picsum.photos/400/400" />
  </div>
</div>

Answer 2

您可以利用以下事实：即使应用于width和/或padding-top，基于百分比的填充也始终引用父元素的padding-bottom。因此，您可以随时使用height: 0;和padding: 50% 0;来获得正方形div。

示例：

div div {
  background: #ccc;
  border-radius: 50%;
  height: 0;
  padding: 50% 0;
}

.a {
  width: 20px;
}

.b {
  width: 80px;
}

<div class="a">
  <div></div>
</div>

<div class="b">
  <div></div>
</div>

现在，您只需将所选的background-image应用于div div。

如何设置<img> max-height：width;没有影响？

2 个答案: