1

Доброй ночи, интересует вопрос можно ли расположить изображение в блоке по центру? К примеру есть блок скажем 400х200 в нем изображение скажем 600х300 и оно располагается по дефолту top: 0; left: 0, если сделать изображению width: 100% оно займет всю ширину а по высоте обрежется, вот хочу уточнить можно ли как то средствами css расположить изображение по центру? Что то на подобие background-position: center center;

2 ответа 2

1
  1. центровкой фона

.crop {
  width: 400px;
  height: 200px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  margin: 5px 0;
}
<div class="crop" style="background-image: url('http://placehold.it/600x450&text=Covered%20to%20400x200');"></div>
<img src="http://placehold.it/600x450&text=Original%20is%20600x450" alt="Original size">


  1. позиционированием по центру

.crop {
  width: 400px;
  height: 200px;
  position: relative;
  overflow: hidden;
  margin: 5px 0;
}
.crop img {
  max-width: 100%;
  height: auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
<div class="crop">
  <img src="http://placehold.it/600x450&text=Covered%20to%20400x200" alt="Covered Image" />
</div>
<img src="http://placehold.it/600x450&text=Original%20is%20600x450" alt="Original size">

4
  • Первый вариант совсем не в ту степь, да для фона его использование (must have и лучше не придумать), а вот второй вариант (если немного поиграться с высотами в принципе выполняет то что я и хотел. Правда думал что это реализуется немного проще. 13 мая 2016 в 5:58
  • @ConstantineShibaev Спасибо за обратную связь! А что "не в ту степь" в первом варианте? Хочу разобраться на будущее. 13 мая 2016 в 6:13
  • Ну в первом варианте используется все для позиционирования background-a, это если мне задавать изображение фоном блока. А меня интересует позиционирование изображения внутри блока. Чтобы в дальнейшем было проще добавлять и изменять кейсы с изображениями. 13 мая 2016 в 6:26
  • @ConstantineShibaev Спасибо. Разобрался. 13 мая 2016 в 6:43
1

Можно.

http://htmlbook.ru/css/background-size

background-size: cover;
1
  • Да ну это совсем не то, и тем более оно же применяется только для фона а меня интересует поведение одного блока относительно другого (его родителя) 13 мая 2016 в 5:54

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.