Question

我有一张图片。它响应地缩放尺寸，同时保持其纵横比。在该图像的顶部布置了几个较小的图像（导航链接）。那些较小的图像必须缩放，主图像和始终位于（相对）相同的位置。

更新

我做了一个jsfiddle来说明问题：http://jsfiddle.net/v9V5p/

巴顿辛普森是形象。它应始终保持在深蓝色容器的范围内。浅蓝色导航链接覆盖，它应该总是覆盖巴特的脸。

这将在WebKit浏览器中运行，在FF或Opera Bart中会太大。如果您使用以下浏览器中的一种：Bart应该以深蓝色容器为中心，这只是预览窗口高度的75％。

第一个想法是：

<div class="image-container">
    <div class="navigation-link"></div>
    <div class="navigation-link"></div>
    <div class="navigation-link"></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 s与其父div相关。

我的解决方案是：

<div class="image-container">
    <div class="image-wrapper">
        <img class="image" src="my image" />
        <div class="navigation-link"></div>
        <div class="navigation-link"></div>
        <div class="navigation-link"></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提供一些内容。

在WebKit浏览器中运行得很漂亮。

如果父元素没有设置max-height和max-width，则Firefox和Opera会将auto和height设置为width。我被告知这符合W3C规范。

有什么方法可以在CSS中做我想做的事情吗？如果我不需要，我不想转向JavaScript进行布局。

Answer 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%;
}

CSS：在响应性调整大小的图像上放置<divs> </divs>

1 个答案: