CSS: поместите изображение в нужную область с помощью абсолютно расположенной метки на картинке

Question

На моей веб-странице есть область, и я хотел бы добавить к ней изображение. Я не знаю размер изображения и ориентацию (портрет или пейзаж). Но я хочу, чтобы он соответствовал области, как показано на рисунке:

Итак, если изображение имеет альбомную ориентацию, оно должно занимать всю ширину области. См. Рисунок 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" alt="">
  <span class="label">Label</span>
</div>

Вот CodePen: см. Код

Но проблема в том, что у меня есть ярлык для каждой картинки и я хочу, чтобы это было в правом верхнем углу картинки, а не в области.

Есть ли способ сделать это только с CSS?

Любая помощь будет признательна! Заранее спасибо!

Answer 1

Вы можете сделать следующее:

• Обернуть изображение и .label span с другим span с классом, например .inner-wrapper и добавить к его css

  position: relative;
  height: 100%;

• Удалить из .wrapper css position: relative; и добавить

display: flex;
justify-content: center;

• Заменить на .img css width: 100%;height: 100%; на max-width: 100%;max-height: 100%;

Просмотрите фрагмент в режиме полной страницы и измените размер окна.

.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" alt="">
      <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" alt="">
      <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" alt="">
      <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" alt="">
      <span class="label">Label</span>
    </span>
  </div>
</div>

Answer 2

вместо подгонки объекта: содержать; замените его на background-size: обложка в файле селектора img css.

Answer 3

Вы должны попытаться использовать background-image вместо одного изображения

.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)" alt="">
  <span class="label">Label</span>
  </div>
</div>

Answer 4

Вы можете обернуть изображение в div с правилом display: inline-block, которое заставит 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>