CSS：使用图片上的绝对定位标签使图像适合正确的区域

Posted 2023-02-23

【中文标题】CSS：使用图片上的绝对定位标签使图像适合正确的区域

【英文标题】：CSS: Make image fit the proper area with the absolutely positioned label on the picture

【发布时间】：2020-02-17 09:30:11

【问题描述】：

在我的网页上有一个区域，我想在其中添加一张图片。我不知道图像的大小和方向（纵向或横向）。但我希望它适合图片中显示的区域：

因此，如果图像具有横向方向，则它必须填满该区域的整个宽度。见图1。如果图像的宽度大于区域的宽度，则必须限制图像的宽度，如果其宽度较小，则必须加宽图像。但是，如果图像的高度大于区域的高度，则必须限制图像的高度。见图2。 我想要的肖像图像类似。见图2。

简而言之，我想要的可以通过object-fit: contain;轻松完成。

.wrapper 
  width: 30%;
  height: 400px;
  overflow: hidden;
  border: 1px solid black;
  position: relative;


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


.label 
  position: absolute;
  top: 0;
  right: 0;
  padding: 15px;
  background-color: #cccccc;

<div class="wrapper">
  <img class="img" src="https://images.unsplash.com/photo-1500622944204-b135684e99fd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" >
  <span class="label">Label</span>
</div>

这里是 CodePen：see the code

但问题是我对每张图片都有一个标签，我希望它位于图片的右上角而不是区域。

有没有办法只用 CSS 做到这一点？

任何帮助将不胜感激！提前谢谢！

【问题讨论】：

欢迎来到 ***！请提供您已经尝试过的Minimal, Complete and Verifiable Example，以便我们帮助您解决问题。您可以参考Help Center进一步完善您的问题。

【参考方案1】：

而不是对象-fit：包含；将其替换为 img 选择器 css 文件中的 background-size:cover。

【参考方案2】：

您可以使用具有display: inline-block 规则的 div 包装图像，这将强制 div 适应图像比例，然后在此 div 中为标签添加另一个 div 并将其定位为绝对值。

.cont 
  width: 300px;
  height: 250px;
  background-size: contain;
  background-repeat: no-repeat;
  margin: 20px;
  border: 3px solid black;
  display: flex;
  align-items: center;
  justify-content: center;


div .image-cont 
  display: inline-block;
  position: relative;


img 
  max-width: 300px;
  max-height: 250px;
  width: auto;
  height: auto;


.label 
  background-color: yellow;
  padding: 5px;
  position: absolute;
  top: 0;
  right: 0;

<div class="cont">
  <div class="image-cont">
    <img src="https://image.shutterstock.com/image-photo/beautiful-abstract-grunge-decorative-navy-260nw-539880832.jpg" />
    <div class="label">Label</div>
  </div>
</div>

<div class="cont">
  <div class="image-cont">
    <img src="https://i.pinimg.com/originals/1b/30/80/1b30806bed30a7d071752948d00e75f8.jpg" />
    <div class="label">Label</div>
  </div>
</div>

【参考方案3】：

您可以执行以下操作：

将图像和.label span 与另一个span 包装在一起，例如.inner-wrapper 并添加到它的 css

  position: relative;
  height: 100%;

从.wrapper css position: relative; 中删除并添加

display: flex;
justify-content: center;

用max-width: 100%;max-height: 100%; 替换.img css width: 100%;height: 100%;

在全页模式下查看 sn-p 并调整窗口大小。

.wrapper,
.wrapper200 
  width: 30%;
  height: 400px;
  overflow: hidden;
  border: 1px solid black;
  /*position: relative;*/
  
  display: flex;
  justify-content: center;


.wrapper200 
  height: 200px;


.inner-wrapper 
  position: relative;
  height: 100%;


.img 
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;


.label 
  position: absolute;
  top: 0;
  right: 0;
  padding: 15px;
  background-color: #cccccc;



/* for visual illustration */
.container 
  display: flex;
  justify-content: space-evenly;
  padding: 10px;
  outline: dashed red 1px;
  margin-bottom: 25px;

<h1>Heigth: 200px</h1>
<div class="container">
  <div class="wrapper200">
    <span class="inner-wrapper">
      <img class="img" src="https://images.unsplash.com/photo-1500622944204-b135684e99fd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" >
      <span class="label">Label</span>
    </span>
  </div>

  <div class="wrapper200">
    <span class="inner-wrapper">
      <img class="img" src="https://images.unsplash.com/photo-1581622634376-ff17d073c4f7?ixlib=rb-1.2.1&auto=format&fit=crop&w=1832&q=80" >
      <span class="label">Label</span>
    </span>
  </div>
</div>

<h1>Heigth: 400px</h1>
<div class="container">
  <div class="wrapper">
    <span class="inner-wrapper">
      <img class="img" src="https://images.unsplash.com/photo-1500622944204-b135684e99fd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" >
      <span class="label">Label</span>
    </span>
  </div>

  <div class="wrapper">
    <span class="inner-wrapper">
      <img class="img" src="https://images.unsplash.com/photo-1581622634376-ff17d073c4f7?ixlib=rb-1.2.1&auto=format&fit=crop&w=1832&q=80" >
      <span class="label">Label</span>
    </span>
  </div>
</div>

【讨论】：

想知道为什么要复制我的答案，你的答案有附加值吗？

@ItayGal 但我没有。在发布之前没有看到您的答案。你可以看到我之前已经编辑了你的答案，标签已打开，我有空时回答了。是的，与内部包装的想法相同。但是休息就完全不同了。你做了自己的布局，我修改了 OP。在我的解决方案中，图像位于包装器的顶部，您的顶部有一些空间。我的解决方案处理包装器宽度为 % 的情况，在这种情况下，您的解决方案会破坏布局。一般来说，我不明白你在说什么。

@ItayGal 是的，对不起，我的错。你很早就回答了我正在谈论的问题。但是我没有使用你的答案。差距我说的是i.imgur.com/SHBIADK.png如果你想继续，让我们转到聊天

@ItayGal 我很抱歉。看了你的编辑历史，发现我是对的。您删除了原始答案，仅在我的问题编辑后才发布此答案，因此 OP 的代码已经存在。现在我明白了，我怎么可能没有看到你的回答。

【参考方案4】：

您应该尝试使用背景图像而不是单个图像

.wrapper 
  width: 30%;
  height: 400px;
  overflow: hidden;
  border: 1px solid black;
  position: relative;


.img 
  width: 100%;
  height: 100%;
  object-fit: contain;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 10%;


.label 
  position: absolute;
  top: 0;
  right: 0;
  padding: 15px;
  background-color: #cccccc;

<div class="wrapper">
  <div class="img" style="background-image:url(https://images.unsplash.com/photo-1500622944204-b135684e99fd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80)" >
  <span class="label">Label</span>
  </div>
</div>