Question

删除浮动：左边没有任何效果： - （

我正在尝试在以下页面上生成一个imagemap： http://fietsklik.company12.com/index.php/how-it-works 第一个图像是imgmap，在响应版本之下。在Chrome上它似乎做了我想要它做的事情，但在Safari 6.0.4上，右边的三个图像没有显示出来。请指教。

响应式'img-map'的代码如下：

<div class="hiw-container">
<img class="hiw-container-img1" src="{{media url="wysiwyg/perfectum/howitworks.jpg"}}" alt="" width="649px" height="500px" />
<img class="hiw-container-img2" src="{{media url="wysiwyg/perfectum/howitworks.jpg"}}" alt="" width="330px" height="166px" /> 
<img class="hiw-container-img3" src="{{media url="wysiwyg/perfectum/howitworks.jpg"}}" alt="" width="330px" height="166px" /> 
<img class="hiw-container-img4" src="{{media url="wysiwyg/perfectum/howitworks.jpg"}}" alt="" width="330px" height="167px" />
</div>

与之相关的CSS：

.hiw-container {
    position: relative;
    padding-bottom: 51.02%;
    padding-top: 0px;
    height: 0;
    overflow: hidden;   
}

.hiw-container-img1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 66%;
    height: 100%;
    float: left
}

.hiw-container-img2 {
    top: 0;
    left: 0;
    width: 34%;
    height: 33%;
    float: right !important;
    padding-left: 200px;
}

.hiw-container-img3 {
    top: 0;
    left: 0;
    width: 34%;
    height: 33%;
    float: right !important;
    padding-left: 200px;
}

.hiw-container-img4 {
    top: 0;
    left: 0;
    width: 34%;
    height: 34%;
    float: right !important;
    padding-left: 200px;
}

任何想法或建议可能会导致hiw-container-img2的图像无法在Safari中显示？（使用Safari 6.0.4）

Answer 1

据我所知，你的图像2,3和4正确地将自己调整为其父级的34％，即0。图像1没有这样做，可能是因为它绝对定位。相反，它忽略了所有大小调整指令（甚至是标记本身中的那些指令），并简单地使其高度与其宽度（行为正确）成比例。

如果从父类中删除height: 0;，则图像2,3和4的大小正确，但图像1的大小为其原始高度的100％（500px，在HTML中设置）。

我的建议是不要专门设置任何图像的高度，只是让它们按比例缩放。因为您在HTML中设置了特定的高度，所以需要使用height: auto;指令覆盖它。下面的示例仅适用于三个侧面图像的大小，以便它们恰好适合主图像（即：它们的高度总和与主要高度相同），当缩放为34％：66％时。如果没有，最后一张图像可能会与所有其他图像对齐：

.hiw-container {
    overflow: hidden;   
}

.hiw-container-img1 { 
    width: 66%;
    height: auto;
    float: left;
}

.hiw-container-img2 {
    width: 34%;
    height: auto;
    float: right;
}

.hiw-container-img3 {
    width: 34%;
    height: auto;
    float: right;
}

.hiw-container-img4 {
    width: 34%;
    height: auto;
    float: right;
}

img没有在Safari中显示，试图使图像映射响应

1 个答案: