CSS: сохранить соотношение сторон элемента Div

Question

CSS: сохранить соотношение сторон элемента Div

0

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

Я создаю свой новый сайт, используя "отзывчивую" технику, и теперь мне не хватает всего одной мелочи:

Я вводил внутри DIV фоновое изображение. DIV должен иметь ширину 100% для заполнения всей страницы, и я должен убедиться, что высота DIV, содержащая изображение, будет автоматически изменяться при изменении размера страницы.

WhiteLine 03 окт. 2013, в 23:00

Источник

0

Пожалуйста, опубликуйте свой код, который у вас уже есть.
disinfor 03 окт. 2013, в 20:07
1

Непонятно, о чем вы спрашиваете. Пожалуйста, постарайтесь объяснить немного лучше, чего вы пытаетесь достичь.
Ennui 03 окт. 2013, в 20:09

Теги:

html

css

2 ответа

0

Это то, что вы ищите? Я просто добавил padding: 5px; и background-color: red; поэтому op может видеть, что div на 100% широк и отзывчив, а также изображение http://jsfiddle.net/hyKCa/1/

user2578173 03 окт. 2013, в 17:12

0

Я не думаю, что это то, что он хочет. Похоже, он устанавливает изображение, используя свойство background css. Пока код не будет опубликован, мы не узнаем.
disinfor 03 окт. 2013, в 20:13

Ещё вопросы

Пожалуйста, опубликуйте свой код, который у вас уже есть.
Непонятно, о чем вы спрашиваете. Пожалуйста, постарайтесь объяснить немного лучше, чего вы пытаетесь достичь.
Я не думаю, что это то, что он хочет. Похоже, он устанавливает изображение, используя свойство background css. Пока код не будет опубликован, мы не узнаем.

fred02138 · Accepted Answer · 2013-10-03T17-29-00.000Z

Если вы хотите, чтобы изображение сохраняло ширину и высоту содержащего div, используйте:

background-size: 100% 100%;

Изображение исказится, но вы можете не возражать.

Если вы хотите, чтобы фон был какой-либо частью изображения, достаточным для охвата всего div при изменении области просмотра, используйте:

background-size: cover;

Если вы хотите, чтобы все изображение было в фоновом режиме с правильным соотношением сторон, используйте:

background-size: contain;

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

HTML

<div id="thediv"></div>

CSS

html, body {
    height: 100%;
}

#thediv {
    height: 100%;
    background-image: url(http://i.imgur.com/MabCTXH.jpg);
    background-size: 100% 100%;
}

Между тем, спасибо за ответ, но есть небольшая проблема с этим кодом <style> # {thediv height: 100%; background-image: url (T.png); размер фона: 100% 100%; } </ style> <div id = "thediv"> </ div> div с фоновым изображением занимает всю страницу по длине (ширине), но я бы не занимал всю по высоте. Я хотел бы занять всю страницу по ширине, но высота будет автоматически изменяться при изменении размера страницы. Надеюсь, я объяснил еще раз спасибо