如何在 CSS 中使用“object-fit：contain”并且图像上仍然有边框半径？答案

【问题标题】：How can I use "object-fit: contain" in CSS and still have a border radius on the image?如何在 CSS 中使用“object-fit：contain”并且图像上仍然有边框半径？
【发布时间】：2021-07-25 01:10:39
【问题描述】：

我正在尝试以“灯箱”样式显示图像，以便它将填充屏幕上的可用区域，在本例中为页面宽度的 90% 和高度的 70%。

使用object-fit: contain; 似乎是事实上的方法，但它与border-radius 的工作并不完全一致。是否可以在 <img> 上使用 object-fit 并且仍然按预期应用边框半径？

您需要调整浏览器窗口的大小以查看运行以下 sn-p 时会发生什么。根据下面的视频，我有same code running in JSFiddle。

div {
  margin: auto;
  width: 90vw;
  height: 70vh;

  background-color: DeepSkyBlue;
}

img {
  width: 100%;
  height: 100%;
  object-fit: contain;

  border-radius: 50px;
  background-color: Crimson;
}

<div>
  <img src="https://images.freeimages.com/images/large-previews/773/koldalen-4-1384902.jpg">
</div>

【问题讨论】：

您需要缩小或扩大 img 标签本身，而不是它呈现的内容：例如：jsfiddle.net/6gw30rvL（网格显示仅用于垂直对齐）

标签： html css image object-fit

【解决方案1】：

正如评论，设置max-width 和max-height 似乎是您需要或期望的：

div {
  margin: auto;
  width: 90vw;
  height: 70vh;
  display:grid;

  background-color: DeepSkyBlue;
}

img {
  max-width: 100%;
  max-height: 100%; 
  margin:auto;/* x,y center if inside a grid or flex box */
 
  object-fit: contain;/* useless by now, img should keep its ratio */
  border-radius: 50px;
  border-radius: calc( 5vw + 5vh); /* will scale, maybe you find this usefull */
  background-color: Crimson;
}

<div>
  <img src="https://images.freeimages.com/images/large-previews/773/koldalen-4-1384902.jpg">
</div>

【讨论】：

【解决方案2】：

包含在这里并没有真正的帮助。

相反，将 img 的最大宽度和高度设置为 100%。系统会将其完全从上到下或从一侧到另一侧进行调整，但 img 元素将具有所需的任何尺寸，因此边框半径可以正常工作。

要使 img 居中，如果这是您想要的，您可以 display: flex 父 div 并将项目对齐/对齐到中心。

div {
  margin: auto auto;
  width: 90vw;
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: DeepSkyBlue;
}

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

  border-radius: 50px;
  background-color: Crimson;
}

<div>
  <img src="https://images.freeimages.com/images/large-previews/773/koldalen-4-1384902.jpg">
</div>

【讨论】：

【解决方案3】：

使用 object-fit: cover; 而不是包含

【讨论】：