7

ブラウザーのサイズが小さくなると、div や画像が縮小する、動的に設計された Web サイトがたくさんあります。

この例は、http://en.wikipedia.org/wiki/Main_Pageです。

ブラウザーのサイズが小さくなると、テキストが含まれる div が縮小されます。これは、縮小を停止することを決定し、テキスト ボックスを覆い始める特定のポイントまで発生します。

私が取り組んでいる JSFiddle でこの効果を実行したいと思います: http://jsfiddle.net/MrLister/JwGuR/10/

フィドルのサイズを拡大すると、画像が動的に適応することがわかります。目標は、特定のポイントで縮小を停止し、この写真を覆い隠すか、陥没させることです。最終的には非常に小さくなり、各画像のテキストが重なって見栄えが悪くなるため、これを行いたいと考えています。

Fiddle の CSS は次のとおりです。

.figure {
    position: relative;
    display:inline-block;
    max-width: 33%;
}

.figure .figcaption {
    text-align: center;
    height:0;
    top: 40%;
    width: 100%;
    font-size: 55px;
    color: white;
    position: absolute;
    z-index: 1;
}

.figure img {
    display: block;
    max-width: 100%;
}
4

3 に答える 3

13

min-width収縮を止めたいものにサイズを追加するだけです:)

そのようです：

.figure {
    position: relative;
    display: inline-block;
    max-width: 33%;
    min-width: 150px;
}

更新されたフィドルは次のとおりです。http://jsfiddle.net/jakelauer/JwGuR/13/

于 2013-05-21T00:14:32.713 に答える
3 
  min-width:500px;

ウィンドウの最小幅は 500px になります。 http://jsfiddle.net/JwGuR/14/ 500px に達すると、画像のサイズ変更が停止します。

于 2013-05-21T00:15:18.713 に答える
1

メディア クエリの例を次に示します。css を使用して、特定のケースの最小幅と最大幅を定義します。あなたの場合、最大幅のケースを指定して、そこにcssプロパティを設定してください。

http://css-tricks.com/css-media-queries/

img{
    width:100%;
}

@media all and (max-width: 699px) {
  img{
    width:500px;
  }
}

これは基本的な例です。ジェイクが言ったように、最小幅を指定することもできますが、多くの場合、最小幅を定義するだけでは不十分なモバイルまたはタブレット ビューでは、ページのレイアウトを変更する必要があります。

于 2013-05-21T00:14:20.697 に答える