Возможно ли поддерживать соотношение сторон фонового изображения при изменении размера в ответном макете?

Я работаю над созданием приложения для настройки гитары. Чтобы сократить время загрузки, я создал тип листа спрайтов с гитарными телами и всеми частями на одном или двух изображениях. В блоке кода, над которым я работаю, ниже, тег div.Возможно ли поддерживать соотношение сторон фонового изображения при изменении размера в ответном макете?

Для этого изображения исходные пропорции составляют 2870 пикселей по ширине на 1700 пикселей. В приведенном ниже примере изображение, «обрезанное» или показанное фоновым изображением, имеет ширину 1001 пиксель на высоту 326 пикселей.

Я пробовал использовать проценты, но не мог понять, как поддерживать пропорции при изменении ширины тега div для гибкого макета.

#camila_template_wpr { 
    background-image: url(../img/jpg_sprite.jpg); 
    background-position: 0% 23.7%; 
    background-repeat: no-repeat; 
    background-size: auto 524%; 
    display: block; 
    margin: auto; 
    height: 324px; 
    max-width: 1001px; 
    position: relative; 
}

источник

2017-02-02 Dave Pierce

Когда я использую максимальную ширину свойство высота не отвечает на запросы и фоновое изображение не масштабируется с шириной. –

Dave, вы предложили внести изменения в мой код, но вы меняете значение%, используемое в дополнении. Почему вы меняете это? Мое объяснение «59,2% - это процентная доля высоты в ширине» больше не актуально, если вы изменяете значение%, то в моем сообщении нет объяснений, как получить значение%. Я хотел бы знать, как вы получили новое дополнение%. –

Я снова посмотрел на это, и я все еще пытаюсь обмотать голову вокруг этого. Ширина «обрезанного» фонового изображения a.k.a. составляет 1001 пиксель шириной 326 пикселей. 326, деленная на 1001, равна .325674, поэтому моя текущая логика была равна 32,567% от высоты. Поэтому нижняя прокладка должна составлять 32,567%. Я не уверен, где я получил 30,895%, но он выглядел хорошо на предварительном просмотре, потому что он был близок к рассчитанным 32,567%. У меня все еще проблема с искажением изображения, когда максимальная ширина достигает 1001 пикселя. Высота продолжает расти. –

Try `height: 0; padding-bottom: 30,895%; 30,895% - это процентная доля высоты в ширине.

#camila_template_wpr { 
 
background-image: url(../img/jpg_sprite.jpg); 
 
background-position: 0% 23.7%; 
 
background-repeat: no-repeat; 
 
background-size: 286.713% 524%; 
 
display: block; 
 
margin: 0 auto; 
 
height: 0px; 
 
max-width: 1001px; 
 
position: relative; 
 
padding-bottom: 32.567%; 
 
}

<div id="camila_template_wpr"></div>

источник

2017-02-02 20:30:33

Возможно ли поддерживать соотношение сторон фонового изображения при изменении размера в ответном макете?

ответ

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