Центровать картинку внутри div'а? [дубликат]

305

21 февраля 2017, 18:24

На данный вопрос уже ответили:

Вертикальная центровка изображения в блоке 3 ответа

Есть картинка, у которой ширина больше родительского div'a (overflow: hidden;). Как сделать так, чтобы видна была только центральная часть картинки, с сохранением пропорций картинки, при уменьшении ширины div'а и чтоб при этом картинка занимала всю высоту div'а?

Answer 1

Вариант 1: сделать картинку ширины `div`

.div { 
    width: 100%; 
    height: 500px; 
} 
img { 
    max-width: 100%; 
    height: auto; 
    display: block; 
    margin: auto; 
}

<div class="div"> 
    <img src="https://mobidevices.ru/images/2017/02/iPhone-7.jpg" alt=""> 
</div>

Вариант 2: сделать картинку `background` к `div`

.div { 
    width: 100%; 
    height: 500px; 
    background: url("https://mobidevices.ru/images/2017/02/iPhone-7.jpg") no-repeat 50% / contain; 
}

<div class="div"></div>

Answer 2

* { 
  padding: 0; 
  margin: 0; 
} 
 
div { 
  margin: 15vh auto auto auto; 
  width: 40vw; 
  height: 70vh; 
  position: relative; 
  border: 1px solid black; 
  overflow: hidden; 
} 
 
img { 
  position: absolute; 
  left: 50%; 
  top: 50%; 
  transform: translate(-50%, -50%); 
}

<div> 
  <img src="https://mobidevices.ru/images/2017/02/iPhone-7.jpg"> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как скрыть Layout? Qt

Есть QLayout, нужно его скрытьУ виджетов есть метод hide(), у layout'ов нет

529

c++

Шаблоны C++ , undefined reference to

stackcpp

413

c++

QDirIterator изменить dir

Есть функция getFileInfo

312

c++

Кубическая интерполяция [требует правки]

Набор аргументов для которых необходимо найти интерполируемые значения(t1):

415