0

私は小さなウェブプロジェクトを持っています。このページには、同じサイズ（360x270ピクセル）の画像がいくつかあります。ブラウザウィンドウのビューポートに適したサイズで画像を拡大縮小したい。サンプルは私が何を意味するかを示します。誰かが私を助けてくれることを願っています。ここにデモンストレーションサイトへのリンクがあります。

http://oscar-charlie.de/#/clients

私のページには、3つの画像を含む2行があります。ブラウザのサイズに比例して画像を拡大縮小する解決策がわかりません。jqueryまたはcss3に基づく私の最初のアイデア。

4

3 に答える 3

1

あなたはおそらくこのようなものが欲しいでしょう：

.classforimages {
    width:33%;
    max-width:360px;
    height:auto;
}

これにより、画像は親の33％を占め、最大幅は360ピクセルになります。

于 2013-02-06T15:13:22.380 に答える
1

あなたはこれを達成することができますmedia-queries：

/* Normal behavior: 4 images */
.your-img {
    height: 25%;
    width: auto;
}
/* If the browser window is 800px high: 3 images */
@media (max-height:800px) {
    .your-img {
        height: 33.3%
    }
}
/* If the browser window is 600px high: 2 images */
@media (max-height:600px) {
    .your-img {
        height: 50%
    }
}
/* If the browser window is 400px high: 1 image */
@media (max-height:400px) {
    .your-img {
        height: 100%
    }
}

これが速くて汚いjsFiddleです

この優れたリソースもご覧ください。

developer.mozilla.org

www.smashingmagazine.com

于 2013-02-06T15:13:55.003 に答える
0

ウィンドウのサイズが変更されたときに、次のような方法で画像のサイズを変更できます。

$(window).resize(function() {
    $(".item img").css({"width": $(window).width()/3, "height": "auto"});
    $(".item").css({"width": $(".item img").width(), "heigt": $(".item img").height()});
});

しかし、それでも、正しい比率を維持しながら、ウィンドウの高さまたは幅を正確に埋めるのに問題があります。

于 2013-02-06T15:09:55.590 に答える