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の画像よりも大きくなる可能性があることです.CSSでそれを見つける方法がわからないため、親divに対してsを一貫して配置/スケーリングする方法がありません.heightwidthnavigation-link

私の解決策は次のとおりです。

<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 and Opera set max-height and max-width to auto if the parent element doesn't have height and width set. I've been told that's according to W3C specs.

Is there any way I can do what I want in CSS? I don't want to turn to JavaScript for layouting, if I don't have to.

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 に答える