Як я можу заповнити поділ зображенням, зберігаючи його пропорційним?


120

Я знайшов цю тему - Як ви розтягуєте зображення, щоб заповнити <div>, зберігаючи співвідношення сторін зображення? - це не зовсім та річ, яку я хочу.

У мене є діва з певним розміром і зображенням всередині нього. Я хочу завжди заповнювати зображення разом із зображенням незалежно від того, чи зображення є пейзажним або портретним. І не має значення, чи буде зображення відрізане (сам div має переповнення).

Тож якщо зображення є портретним, я хочу, widthщоб воно було, 100%і height:autoтак воно залишалося пропорційним. Якщо зображення є пейзажним, я хочу, heightщоб воно було 100%і було width to beавтоматично ". Звучить складно правильно?

<div class="container">
   <img src="some-image.jpg" alt="Could be portrait or landscape"/>
</div>

Оскільки я не знаю, як це зробити, я просто створив швидкий образ того, що я маю на увазі. Я навіть не можу правильно описати це.

введіть тут опис зображення

Отже, я думаю, я не перший, хто це запитує. Однак я не зміг знайти рішення для цього. Можливо, є якийсь новий CSS3 спосіб цього зробити - я думаю про flex-box. Будь-яка ідея? Може, це навіть простіше, ніж я очікую?


Чому ви хочете використовувати css3, коли ви все ще можете це зробити легко за допомогою JavaScript? Ідіть з js matey ..
GautamJeyaraman

1
Не перевірено, але ви можете спробувати встановити мінімальну висоту та міні-ширину на 100%? Це, принаймні, повинно заповнити поле і тримати його в пропорції
chrisbulmer

Відповіді:


150

Якщо я правильно зрозумів, що ви хочете, ви можете залишити атрибути ширини та висоти на зображенні, щоб зберегти співвідношення сторін і використовувати флексбокс, щоб зробити центринг для вас.

.fill {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}
.fill img {
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%
}
<div class="fill">
    <img src="https://lorempizza.com/320/240" alt="" />
</div>

JSFiddle тут

Я успішно тестував це в IE9, Chrome 31 та Opera 18. Але жодних інших браузерів не тестували. Як завжди, ви повинні враховувати ваші конкретні вимоги щодо підтримки.


У IE9 зображення за цим методом не фокусується вертикально чи горизонтально, воно вирівнюється вгорі та вліво. i59.tinypic.com/ouo77s.png
Майк Корменді

1
Ця проблема є в iPad. Здається, сафарі розтягує зображення на 100% своєї висоти, але не зберігає властивості мінімальної ширини.
Шон

14
Здається, це масштабує невеликі зображення до заповнення, але не до відповідного розміру. Принаймні, коли я використовую велике зображення, воно показує лише мініатюрну його частину.
Джонкл

12
Щоб масштабне зображення було зменшено до розміру, я використав наступне зображення:.fill img { min-height:100%; min-width: 100%; object-fit: cover; }
Петро G

супер герой! : D
Гаріс М Суеро

47

Це трохи пізно, але у мене просто була така ж проблема, і я нарешті вирішив її за допомогою іншої публікації про stackoverflow ( https://stackoverflow.com/a/29103071 ).

.img {
   object-fit: cover;
   width: 50px;
   height: 100px;
}

Сподіваюся, це все-таки комусь допомагає.

Ps: Також працює разом із властивостями max-висоти , max-ширини , min-width та min-height css. Це особливо зручно з використанням одиниць довжини, таких як 100% або 100vh / 100vw, щоб заповнити контейнер або все вікно браузера.


це рішення для кроссбоузера?
підсвічник

1
об'єкт-примірник: обкладинка; працює чудово! Інформація про браузер (не працює в IE): css-tricks.com/almanac/properties/o/object-fit Резервне рішення для IE: medium.com/@primozcigler/… MS працює над його реалізацією: developer.microsoft.com / en-us / microsoft-edge / платформа / статус /…
Kaah

Думаю, object-positionтут буде корисним додавання правила до цього класу. Просто бічна записка.
Taha Paksu

8

Старе питання, але заслуговує на оновлення, оскільки зараз є спосіб.

Правильна відповідь на основі CSS - це використання object-fit: cover, яке працює як би background-size: cover. Позиціонування буде опікуватися object-positionатрибутом, який за замовчуванням проводиться по центру.

Але його немає в жодних браузерах IE / Edge або Android <4.4.4. Також object-positionне підтримується Safari, iOS або OSX. Полісистеми існують, а зображення-об'єкти-образи, здається, надають найкращу підтримку.

Щоб отримати докладнішу інформацію про те, як працює цей ресурс, див. Статтю про трюки CSSobject-fit для пояснення та демонстрації.


8

Це слід зробити:

img {    
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}

Для мене працює досить добре, в моєму випадку мені просто потрібно було додати позицію: абсолютну та верхню: 0, а також деякий z-індекс
byroncorrales

7

Усі відповіді нижче мають фіксовану ширину та висоту, що робить рішення «невідчутливим».

Щоб досягти результату, але тримати зображення чуйним, я використав наступне:

  1. Всередині контейнера помістіть прозорий gif-зображення із потрібною пропорцією
  2. Надайте тег зображень inline css background із зображенням, яке ви хочете змінити розмір та обрізати

HTML:

<div class="container">
    <img style="background-image: url("https://i.imgur.com/XOmNCwY.jpg");" src="img/blank.gif">
</div> 


.container img{
   width: 100%;
   height: auto;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
}​

Я використовував фонове зображення для всього сайту дизайнерського портфоліо компанії, щоб я міг мати розмір фону: обкладинка. Тепер моє зображення SEO все переплутано, оскільки фонові зображення Google не розпізнає. Я б хотів, щоб я кодував це іншим способом.
Алекс Банман

5

Ви можете досягти цього за допомогою властивостей css flex. Будь ласка, дивіться код нижче

.img-container {
  border: 2px solid red;
  justify-content: center;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  
}
.img-container .img-to-fit {
  flex: 1;
  height: 100%;
}
<div class="img-container">
  <img class="img-to-fit" src="https://images.pexels.com/photos/8633/nature-tree-green-pine.jpg" />
</div>


1
Це працює ТІЛЬКИ, якщо ви вилучите властивості ширини та висоти, про які говорилося в деяких інших відповідях.
Chiwda

3

Розглянемо використання background-size: cover(IE9 +) спільно з background-image. Для IE8-, є polyfill .


Для цього не потрібен фон-URL? Чи можете ви детальніше розробити? Чи може це працювати з <img src = "" />, як зазначено у запитанні?
harsimranb

@harsimranb Звичайно, background-sizeмає сенс виключно із background-imageвказаними (я відповідь оновив відповідно). Це не стосується IMGелементів.
Марат Таналін

Це найкраща відповідь. Це просто і має хорошу підтримку браузера. Усі інші рішення або дуже складні, або не працюють в IE (9).
JoostS

1

Спробуйте це:

img {
  position: relative;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translateX(-50%);
}

Сподіваюся, це допомагає


1

Ви можете використовувати div для досягнення цього. без тегів img :) сподіваюся, це допоможе.

.img{
	width:100px;
	height:100px;
	background-image:url('http://www.mandalas.com/mandala/htdocs/images/Lrg_image_Pages/Flowers/Large_Orange_Lotus_8.jpg');
	background-repeat:no-repeat;
	background-position:center center;
	border:1px solid red;
	background-size:cover;
}
.img1{
	width:100px;
	height:100px;
	background-image:url('https://images.freeimages.com/images/large-previews/9a4/large-pumpkin-1387927.jpg');
	background-repeat:no-repeat;
	background-position:center center;
	border:1px solid red;
	background-size:cover;
}
<div class="img">	
</div>
<div class="img1">	
</div>


1

Єдиний спосіб, як я досяг «описаного сценарію найкращого випадку», - це розміщення зображення як фону:

<div class="container"></div>
.container {
    width: 150px;
    height: 100px;
    background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}​

1

Ось відповідь з підтримкою використання IE, object-fitщоб ви не втратили співвідношення

Використовуючи простий JS фрагмент коду , щоб виявити , якщо object-fitпідтримується , а потім замінити imgдляsvg

//for browsers which doesn't support object-fit (you can use babel to transpile to ES5)

if ('objectFit' in document.documentElement.style === false) {
  document.addEventListener('DOMContentLoaded', () => {
    Array.prototype.forEach.call(document.querySelectorAll('img[data-object-fit]'), image => {
      (image.runtimeStyle || image.style).background = `url("${image.src}") no-repeat 50%/${image.currentStyle ? image.currentStyle['object-fit'] : image.getAttribute('data-object-fit')}`
      image.src = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${image.width}' height='${image.height}'%3E%3C/svg%3E`
    })
  })
}
img {
  display: inline-flex;
  width: 175px;
  height: 175px;
  margin-right: 10px;
  border: 1px solid red
}

/*for browsers which support object fit */

[data-object-fit='cover'] {
  object-fit: cover
}

[data-object-fit='contain'] {
  object-fit: contain
}
<img data-object-fit='cover' src='//picsum.photos/1200/600' />
<img data-object-fit='contain' src='//picsum.photos/1200/600' />
<img src='//picsum.photos/1200/600' />


Примітка. Також є кілька object-fitполіфілів, які зроблять object-fitроботу.

Ось кілька прикладів:


0

Ось у вас є мій робочий приклад. Я використав трюк, який встановлює зображення як фон контейнера div з розміром фону: cover та background-position: center center

Я розмістив зображення шириною: 100% і непрозорістю: 0, зробивши його невидимим. Зауважте, що я показую своє зображення лише тому, що в мене є особливий інтерес щодо виклику події "дитяче натискання".

Зауважте, що, хоч я іду за кутовим, це абсолютно не має значення.

<div class="foto-item" ng-style="{'background-image':'url('+foto.path+')'}">
    <img class="materialboxed" ng-class="foto.picid" ng-src="{{foto.path}}" style="opacity: 0;filter: alpha(opacity=0);" width="100%" onclick="$('.materialboxed')/>
 </div>
<style>
.foto-item {
height: 75% !important;
width: 100%;
position: absolute;
top: 0;
left: 0;
overflow:hidden;
background-size: cover;
background-position: center center;
}
</style>

Результат - той, який ви визначаєте як оптимальний у всіх випадках


0

Зараз цінність CSS object-fit: coverта object-position: left centerвластивостей вирішує цю проблему.


0

.image-wrapper{
    width: 100px;
    height: 100px;
    border: 1px solid #ddd;
}
.image-wrapper img {
    object-fit: contain;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}
<div class="image-wrapper">
  <img src="">
</div>


-3

Просто зафіксуйте висоту зображення та надайте ширину = авто

img{
    height: 95vh;
    width: auto;
}
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.