CSS: Размещение на чувствительном изображении

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

ОБНОВИТЬ:

Я сделал jsfiddle, чтобы проиллюстрировать проблему: http://jsfiddle.net/v9V5p/

Барт Симпсон - это образ. Он всегда должен находиться в пределах темно-синего контейнера. Светло-голубая навигационная ссылка накладывается, она всегда должна охватывать лицо Барта.

Это будет работать в WebKit-браузерах, в FF или Opera Bart будет слишком большой. Если вы используете один из этих браузеров: Bart должен быть центрирован в темно-синем контейнере, который составляет всего 75% от высоты окна предварительного просмотра.

Первая идея заключалась в следующем:

<div>
 
 
 
</div>

и CSS:

.image-container {
 bottom: 0; 
 width: 100%;
 height: whatever px;
 background: url(my image) no-repeat bottom center;
 background-size: contain;
}

Легко. Проблема заключается в том, что image-container может увеличиваться больше, чем изображение по height или по width и я не знаю способа в CSS, чтобы узнать, что это такое, поэтому у меня нет возможности последовательно размещать/масштабировать navigation-link в в отношении их родительского div.

Мое решение было:

<div>
 <div>
 
 
 
 
 </div>
</div>

и CSS:

.image-container {
 bottom: 0; 
 width: 100%;
 height: whatever px;
}
.image-wrapper {
 display: inline-block; // shrink-to-fit
}
.image {
 max-height: 100%;
 max-width: 100%;
}

img при сохранении пропорций и image-wrapper сжимается, чтобы соответствовать им, тем самым давая navigation-links что navigation-links то захватывающее.

Это прекрасно работает... в WebKit-браузерах.

Firefox и Opera устанавливают max-height и max-width в auto если родительский элемент не имеет установленной height и width. Мне сказали, что согласно спецификациям W3C.

Есть ли способ сделать то, что я хочу в CSS? Я не хочу обращаться к JavaScript для макетирования, если мне это не нужно.

1 ответ

попробовали ли вы установить класс.image:

.image {
 max-width: 100%;
 height: auto;
}

поэтому размер изображения изменяется в зависимости от ширины и высоты его родителей

Примечание: изображение будет оставаться пропорциональным приведенному выше

ОБНОВИТЬ:

что об этом: http://jsfiddle.net/v9V5p/35/

добавление высоты: 100%;классу.wrapper

.wrapper {
 display: inline-block;
 position: relative;
 background-color: #555;

 height:100%; /* added this */
}

также добавляя это в html, body:

html, body {
 height: 100%;
}

licensed under cc by-sa 3.0 with attribution.