Возможно ли достичь этой гибкой схемы без использования JS?

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

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

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

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

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

Примеры:

Когда фоновое изображение обрезается сверху и снизу:
Когда фоновое изображение, когда оно обрезано слева и справа:

Ответ 1

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

Это не проблема обрезания переднего плана, и вы также можете указать постоянную маржу вокруг изображения переднего плана. Кроме того, 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;
}

Ответ 2

Попробуйте следующее:

<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/, чтобы увидеть, как он запускается.

Ответ 3

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

В основном, я только сделал фоновое изображение фона для <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;
}

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

edit again Чтобы получить фон для обрезки по центру, вам нужно будет установить положение "центр центра" вместо "left top". (Или "центральная вершина", если вы хотите, чтобы она была сосредоточена по горизонтали.)

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

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

Ответ 4

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

Поскольку вы пытаетесь изменить размер изображения, вы не можете использовать свойство background и вместо этого должны использовать тег <img>. Ваше изображение всегда будет стараться занимать столько места, сколько возможно, если ширина и высота не установлены. Таким образом, соотношение сторон не будет поддерживаться, или ваше изображение будет обрезано.
Другая оговорка об изменении размера изображения заключается в том, что вы не сможете вертикально выровнять ее по центру своей страницы, не зная ее размеров.