0

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

更新：

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

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

这将在 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相对于其父 div 放置/缩放 s。

我的解决方案是：

<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 浏览器中。

Firefox 和 Opera 设置max-heightand max-widthtoauto如果父元素没有height和width设置。我被告知这是根据 W3C 规范。

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

4

1 回答 1

0

您是否尝试将 .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 正文中：

html, body {
   height: 100%;
}
于 2013-10-16T14:53:32.693 回答