0

float:left を削除しても効果はありませんでした:-(

次のページでイメージマップをレスポンシブにしようとしています: http://fietsklik.company12.com/index.php/how-it-works 最初の画像は imgmap で、その下にレスポンシブ バージョンがあります。Chrome では希望どおりに動作するように見えますが、Safari 6.0.4 では右側の 3 つの画像が表示されません。お知らせ下さい。

レスポンシブ '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 から img4 の画像が Safari に表示されない原因となるアイデアや提案はありますか? (Safari 6.0.4 を使用)

4

1 に答える 1

0

これからわか​​る限り、画像 2、3、および 4 は、親の 34% (0) に正しくサイズ変更されています。画像 1 は、おそらく絶対に配置されているため、これを行っていません。代わりに、すべてのサイズ変更指示 (タグ自体の指示も含む) を無視し、単純に高さを幅に比例させます (これは正しく動作しています)。

親クラスからを削除するとheight: 0;、画像 2、3、および 4 は正しくサイズ変更されますが、画像 1 は元の高さの 100% (500px、HTML で設定) でサイズ変更されます。

私の提案は、画像の高さを具体的に設定せず、サイズを比例させることです。height: auto;HTML で特定の高さを設定したため、それをディレクティブでオーバーライドする必要があります。以下の例は、34%:66% にスケーリングされたときに、3 つのサイド イメージがメイン イメージのすぐ隣に収まるようにサイズ設定されている (つまり、高さの合計がメイン イメージの高さと同じである) 場合にのみ機能します。そうでない場合、最後の画像が他のすべての下に配置される可能性があります。

.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;
}
于 2013-05-01T15:32:23.080 に答える