Размер обложки обложки фона

Я использую размер фона: обложка свойство для создания div с фоном image отзывчивый. Но он получает обрезанный, который нежелателен. Есть ли способ избежать обрезки, а также получить отзывчивый образ? Я даже попробовал замену div с тегом img и использовал Background-size cover to img tag статью, чтобы она выглядела как будто. Тем не менее вопрос преобладал.Размер обложки обложки фона

Вот CSS для сНа, имеющие фонового изображения:

.slides { 
    width: 100%; 
    height: 100%; 
    background: url("images/image1.jpg"); 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-size: cover; 
}

Скриншоты: После того, как искажается (разрешение упомянутые выше изображений)

Фактического изображение:

источник

2015-11-25 Bhumika Makhijaney

'background-size: cover' намеренно делает обрезку, то есть он гарантирует, что область элемента всегда покрыта. Что именно вы хотите? Вы пробовали 'background-size: содержать'? Это сохранит весь образ внутри его элемента, но может вызвать пустые промежутки. –

Я хочу полноэкранные изображения в слайдере. Поэтому я использовал элементы div (как слайды), имеющие фоновое изображение. Но мне тоже нужно сделать это отзывчивым, и поэтому я не использую 'background-size: 100% 100%' или 'background-size: содержать' и не отставать от обложки. –

Итак ... Будут случаи, когда соотношение сторон изображения не соответствует вашему размеру элемента. Если вы не хотите растянуть изображение неестественно, будут отрезаны части или пробелы оставлены пустыми; это простая простая геометрия. –

Если это помогает - полностью поддерживать отзывчивые изображения, вы можете использовать

picture 
sizes

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

источник

2015-11-25 17:24:26

Размер обложки обложки фона

ответ

Смежные вопросы