Можно ли добиться такой гибкой компоновки без использования JS? - PullRequest
Новая
       1

Можно ли добиться такой гибкой компоновки без использования JS?

11 голосов
/ 01 ноября 2011

То, чего я пытаюсь достичь без использования JS, можно увидеть на jsfiddle.net / k2h5b / .

В основном я хотел бы отобразить два изображения, оба по центру, одно на фоне и одно на переднем плане :

  • Фоновое изображение : должно охватывать все окно , не влияя на соотношение сторон, что означает, что изображение всегда будет касаться двух противоположных краев окна, но изображение будет обрезано .
  • Forground Image : должно быть внутри окна без влияния на соотношение сторон, что означает, что изображение всегда будет касаться двух противоположных краев окна, но изображение не будет обрезано .
  • Не имеет значения, является ли это тегом <div> или <img>, если они отображают изображения.
  • Также предположим, что размеры изображения известны заранее и могут использоваться в CSS или HTML-части.

Итак, мой вопрос: возможно ли использовать только CSS или CSS3?

Если это невозможно, я приму ответ, который будет максимально приближен к моей цели.

Примеры:

  • Когда фоновое изображение обрезается сверху и снизу: example when background image is cropped from top and the bottom

  • Когда фоновое изображение , когда оно обрезано слева и справа: example when background image is cropped from left and right

Ответы [ 4 ]

6 голосов
/ 02 ноября 2011

Посмотрев на ответ @Kent Brewster , я думаю, что смогу выполнить все требования ОП.

Это не имеет проблемы с обрезкой изображения на переднем плане, и вы также можете указать постоянное поле вокруг изображения на переднем плане. Также div используется вместо тега img, потому что мы используем фоновые изображения. Вот ссылка , а вот код: 

<div id='bg'></div>
<div id='fg'></div>

#bg {
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: url(http://i.imgur.com/iOvxJ.jpg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}
#fg {
  position: absolute;
  top: 10px;
  left: 10px;
  bottom: 10px;
  right: 10px;
  opacity: .7;
  background-image: url(http://i.imgur.com/HP9tp.jpg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}
4 голосов
/ 02 ноября 2011

Попробуйте это: 

<html>
<style>
body {
  margin: 0;
}
#bg {
  position: absolute;
  height: 100%;
  width: 100%;
  background: transparent url(bg.jpg) 50% 50% no-repeat;
  background-size: cover;
}
#fg {
  position: absolute;
  height: 90%;
  width: 90%;
  top: 5%;
  left: 5%;
  background: transparent url(fg.jpg) 50% 50% no-repeat;
  background-size: cover;
  opacity: .7;
}
</style>
<body>
<div id="bg"></div>
<div id="fg"></div>
</body>
</html>

Если требование масштабирования является гибким, оно может работать.См. http://jsfiddle.net/k2h5b/5/, чтобы увидеть, как он работает.

1 голос
/ 02 ноября 2011

Невозможно добиться этого эффекта, используя только CSS, по двум основным причинам:

  1. Поскольку вы пытаетесь изменить размер изображения, вы не можете использовать свойство background и вместо этого должны использовать тег <img>. Ваше изображение всегда будет занимать как можно больше места, если ширина и высота не заданы. Таким образом, форматное соотношение не будет сохранено, или ваше изображение будет обрезано.
  2. Еще одна оговорка, связанная с изменением размера изображения, заключается в том, что вы не сможете вертикально выровнять его по центру страницы, не зная его размеров.
1 голос
/ 01 ноября 2011

Да, это возможно .

По сути, я просто сделал фоновое изображение фоном для <body> (конечно, не должно быть телом), а затем вставилизображение внутри него с небольшим полем. 

<body>
  <img id='fg' src='http://3.bp.blogspot.com/-OYlUbWqyqog/TeL-gXGx3MI/AAAAAAAAHRc/bdqvvvaeC7c/s1600/bald-eagle3.jpg'></img>
</body>

css: 

body {
  margin: 0; padding: 0;
  overflow: hidden;
  background: url('http://wallpaper.zoda.ru/bd/2006/07/21/2c7b4306fd22f049f331d43adb74a5f7.jpg') no-repeat left top;
}

#fg {
  margin: 20px 20px;
  opacity: 0.7;
}

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

edit - Хорошо, хорошо для изображения, если вы делаете Если вы хотите, чтобы оно обрезалось и сохранялось правильное соотношение сторон, тогда, я думаю, вам нужно будет заранее знать размер изображения, чтобы оно работало.Не имея этого, вот еще одна ревизия . 

<body>
  <div id='fg'>&nbsp;</div>
</body>

css: 

body {
  margin: 0; padding: 0;
  overflow: hidden;
  background: url('http://wallpaper.zoda.ru/bd/2006/07/21/2c7b4306fd22f049f331d43adb74a5f7.jpg') no-repeat left top;
}

body, html { width: 100%; height: 100%; }

#fg {
  margin: 2%; width: 96%; height: 96%;
  opacity: 0.7;
  background: url('http://3.bp.blogspot.com/-OYlUbWqyqog/TeL-gXGx3MI/AAAAAAAAHRc/bdqvvvaeC7c/s1600/bald-eagle3.jpg') no-repeat center center;
}

Если вы знаете размеры изображения, вы можете установить max-height и max-ширина.(Я тоже попробую: -)

отредактировать снова Чтобы фон обрезался по центру, вам нужно установить положение "center center" вместо«левый верх».(Или «по центру», если вы просто хотите, чтобы он был отцентрирован по горизонтали.)

Вертикальное центрирование элементов с помощью CSS без передовых нестандартных функций (гибкая компоновка блоков) затруднительно.Это может быть связано с JavaScript.Я скажу, что одна проблема с любым JavaScript-решением, подобным этому, заключается в том, что действительно замедляет работу браузера.Если вы должны это сделать, я бы предложил ввести небольшую задержку во времени, чтобы вы не пытались пересчитать макет для каждого события resize.Вместо этого установите таймер примерно на 200 миллисекунд в будущем, когда работа будет выполнена, и каждый раз, когда вы это делаете, отменяйте предыдущий таймер.Таким образом, в то время как человек перетаскивает угол окна, он не сжигает его ЦП.

редактировать еще больше ооооо да @ Кент Брюстер ответ с вертикальным центрированием хорош - явсегда забудь этот трюк: -)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...