Подгоните изображение к контейнеру по его меньшей стороне, не зная ориентации изображения - PullRequest
Новая
       11

Подгоните изображение к контейнеру по его меньшей стороне, не зная ориентации изображения

0 голосов
/ 01 декабря 2018

У меня есть контейнер (например, квадрат) с заданным абсолютным размером.Теперь я хотел бы подогнать изображение внутри контейнера к его родительскому контейнеру его меньшей стороной, тогда как большая сторона переполняет контейнер.Другими словами: меньшая сторона должна точно соответствовать 100%, но оба должны быть> = 100% контейнера.Это все без сжатия изображения.

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

Возможно ли эторешить эту проблему, сказав, что min-width и min-height изображения равны высоте и ширине родительского контейнера?Или у кого-нибудь есть другое простое решение?

Оцените любой намек Спасибо, Себастьян

Ответы [ 2 ]

0 голосов
/ 01 декабря 2018

Это возможно с использованием только CSS, но не поддерживается кросс-браузер.Здравствуйте, IE: 

img {
  object-fit: cover;
  max-width: 100%;
  max-height: 100%;
  min-width: 100%;
  min-height: 100%;
}

Посмотрите, как это работает: 

.sized-container {
  width: 25vw;
  height: 25vw;
  display: inline-block;
  float: left;
}
.sized-container img {
  object-fit: cover;
  max-width: 100%;
  max-height: 100%;
  min-width: 100%;
  min-height: 100%;
}
body {margin :0;}
<div class="sized-container">
  <img src="https://loremflickr.com/640/360">
</div>
<div class="sized-container">
  <img src="https://loremflickr.com/360/640">
</div>
<div class="sized-container">
  <img src="https://loremflickr.com/100/100">
</div>
<div class="sized-container">
  <img src="https://loremflickr.com/1000/1000">
</div>

Для кросс-браузерного решения вы должны полагаться на JavaScript.
Скрыть элементы <img> при получении их srcзначения для установки фона контейнера.Контейнеры имеют background-size:cover для обеспечения требуемого размера и обрезки.
Решение также увеличивает небольшие изображения, чтобы соответствовать ширине / высоте родительского размера: 

let containers = document.querySelectorAll('.sized-container');
for (let i = 0; i < containers.length; i++) {
  var container = containers[i],
      image = container.querySelector('img');
  if (image)
    container.style.backgroundImage = 'url(' + image.getAttribute('src') + ')'
}
.sized-container {
  width: 25vw;
  height: 25vw;
  background: transparent 50% 50% no-repeat /cover;
  float: left;
}
.sized-container img {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
}
body { margin: 0;}
<div class="sized-container">
  <img src="https://loremflickr.com/640/360">
</div>
<div class="sized-container">
  <img src="https://loremflickr.com/360/640">
</div>
<div class="sized-container">
  <img src="https://loremflickr.com/100/100">
</div>
<div class="sized-container">
  <img src="https://loremflickr.com/1000/1000">
</div>

Если использовать jQuery, скрипт будет немного короче: 

$('.sized-container').each((i,e) => {
  let img = $('img', e);
  if (img.is('img'))
    $(e).css({backgroundImage:'url(' + img.first().attr('src') + ')'});
})

Важное примечание: Очевидно, что если у вас есть контроль над разметкой, вы должны установить background-image родительского элемента при создании разметки, чтобы вам не пришлось извлекать ее из изображений с помощью JavaScript.Тем не менее, я бы оставил элементы <img> в скрытом виде для целей доступности (например, средства чтения с экрана, атрибуты заголовка и т. Д.).

0 голосов
/ 01 декабря 2018

Одним из решений может быть показ изображения в качестве фонового изображения.Недостатком является то, что изображение не будет вести себя точно так же, как тег <img>.

Вы можете использовать следующий CSS для <div> или чего-то подобного: 

height: [HEIGHT] px;
width: [WIDTH] px;
background-image: url('[URL]');
background-size: cover;
...