Я знаю, что уже есть миллион вопросов и ответов, касающихся CSS background-image, но, к сожалению, я не могу найти правильный ответ; Кроме того, некоторые ответы довольно старые ...

Мой CSS:

#showcase {
  min-height: 500px;
  background: url('../img/P1220784--grijs-1920.jpg') no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  text-align: center;
  color: #a21a21;
  background-color: rgba(255, 255, 255, .9);
  font-weight: 600;
}

Почти идеально подходит для меня, за исключением того, что при изменении размера изображение обрезается по бокам. Изображение - фотография людей, поэтому я хочу, чтобы все они были показаны! (Я должен был добавить, что используемое изображение - 1920 * 798 пикселей). Можно ли это сделать?

Спасибо, объявление

1
Ad Rienks 22 Фев 2018 в 14:10

4 ответа

Лучший ответ

На самом деле, я решил следовать предложению @ Dejan.S. img как тег HTML, а не использовать его в качестве фона. Облегчает мою жизнь!

0
Ad Rienks 23 Фев 2018 в 01:03

Попробуй это

background-size: contain;
2
Pons Purushothaman 22 Фев 2018 в 11:13

Привет Вы можете попробовать все возможные атрибуты свойств "background-size" в браузере.

Фоновый размер: 100% -Заставить изображение покрыть весь div, но изображение будет растянуто.

Background-size: cover - Сделайте так, чтобы Image покрывал весь div с отзывчивым отрезанным функционалом.

Фоновый размер: авто / содержит - Установить изображение ответственно в соответствии с шириной высоты на div, но не покрывать целое.

0
Nirmal Bajpai 22 Фев 2018 в 11:31

Вы можете использовать background-size: auto 100%;

0
sudhanshum 22 Фев 2018 в 11:13