Как обрезать изображение и сохранить его в центре при изменении размера окна - PullRequest
Новая
       47

Как обрезать изображение и сохранить его в центре при изменении размера окна

0 голосов
/ 22 января 2019

У меня есть тег изображения (содержащий .png), который охватывает ширину моего окна просмотра. Когда я изменяю его размер, я хочу, чтобы он был обрезан так, чтобы центр png был зафиксирован в центре страницы, однако он обрезается относительно своей верхней левой точки. Изображение также внутри

Изображение является частью начальной загрузки и является рекламным баннером веб-сайта. Я пытался использовать изображение в качестве фонового изображения, и оно работало именно так, как я хотел, но я бы предпочел использовать для этого тег изображения (доступность и другие параметры управления). Я также попробовал свойство object-position в CSS, и оно не сработало (я применил его к изображению) 

<div class="image-container">
    <img src="img/..." class="banner-image" alt="Banner image">
</div>

CSS 

.image-container {
    height: 460px;
    overflow: hidden;
}

.banner-image {
    min-width: 100%;
}

Это небольшое изображение, показывающее то, что я испытываю, и желаемый результат: (Я не могу опубликовать его как изображение, но я загрузил в imgur)

https://imgur.com/a/TrgAo0w

Ответы [ 2 ]

0 голосов
/ 22 января 2019

Flexbox может сделать это.

В этом случае я разрешил overflow и сделал изображение слегка прозрачным, чтобы вы могли видеть его поведение. 

.image-container {
  height: 460px;
  //overflow: hidden;
  display: flex;
  width: 60vw;
  margin: 1em auto;
  border: 1px solid red;
  justify-content: center;
}

.banner-image {
  opacity: .5
}
<div class="image-container">
  <img src="http://www.fillmurray.com/620/460" class="banner-image" alt="Banner image">
</div>
0 голосов
/ 22 января 2019

Чтобы поместить изображение в div, вы можете использовать css , например , следующее:

HTML 

<div class="image-container">
</div>

CSS 

.image-container {
    background: url("../banner.jpg") no-repeat center;
    background-size: cover;
    height: 460px;
    width: 100%;
}

Скрипка: https://jsfiddle.net/01x82wz3/

Ссылка: https://developer.mozilla.org/de/docs/Web/CSS/background-size

...