0

だから私は必要なものを説明するためにこのサンプルを持っています:

CSS

.thumb-image { 
    height:450px;
    width:450px;
}
#image-container {
    width: 800px;
    height: auto;
}

html

<div id="image-container">
    <img src="Forest.jpg" class="thumb-image" alt="Forest" style="cursor: pointer;"  />
</div>

js

$('.thumb-image').click(function(){
    $(this).toggleClass('thumb-image');
});

ここでは、イメージがクライアントからフル サイズでダウンロードされます。キャッシュされた画像は使用せず、サムネイルをシミュレートするために、各画像にwidthandを適用するだけです。heightただし、ユーザーがクリックしたときに大きな画像を表示できるようにしたいので、使用するの$(this).toggleClass('thumb-image');が最も適切であることがわかりました。これにより、画像を拡大してから、事前定義された寸法に戻すことができるため、問題ありません。しかし、一部の画像は大きすぎるためwidth、表示される画像を許容できるもの (私の場合は 800px) に制限し、拡大された画像が表示される場所を制御できるようにしたいので、場所を作成しまし<div id="image-container">た私の拡大画像を表示したいです。

問題は、現在のように div を拡大せずに、画像が div のスペースのみを占めるようにする方法がわからないことです。

4

3 に答える 3

2

次のようなものを使用して、コンテナーよりも幅の広い画像がないことを確認できます。

#image-container img {
    max-width: 100%;
}

最善の解決策は、必要以上に大きな画像を提供せず、帯域幅を節約することです;)

于 2013-06-07T07:11:59.557 に答える
1 
<style>
    .thumb-image {
        height: 450px;
        width: 450px;
    }

    #image-container {
        max-width: 800px;
        height: auto;
    }

    #image-container img {
        width: 100%;
    }
</style>
于 2013-06-07T07:15:31.720 に答える