3

私の質問は簡単です。2つの長方形の画像があるとしましょう。1つ目は幅200ピクセル、高さ100ピクセルで、2つ目は幅100ピクセル、高さ200ピクセルです。

一定の幅/高さで画像を表示したいのですが、たとえば150px x 150pxで、画像を拡大せずに表示します。

ここに画像の説明を入力してください

画像の周りに空白/パディングを入れてもかまいません。問題は、画像の幅と高さが任意である可能性があることです。画像を引き伸ばさずに、正方形のボックスに制限したいと思います。

次のCSSは、150pxx150pxに収まるように画像を拡大します。

img {
    width: 150px;
    height: 150px;
}

もう少しマークアップが必要な場合でも、最も望ましい解決策はCSSです。JS/jQueryも大丈夫です。

4

3 に答える 3

6

どうですか：

img {
    max-height:150px;
    max-width:150px
}

小さい画像を大きくすることに関する2番目の質問を達成するには、jQueryを使用します。事前に写真の向きを知っていて、それらの画像に別のcssクラスを適用すれば、CSSは機能する可能性があります...しかし、これは機能するので、CSSの最大幅のものはもう必要ありません。

<div class="container"><img src="images/DSC_0470.JPG" alt="Rad Image" /></div>

<script>
    $(document).ready(
        function () {
            $('.container img').each(
            function () {
                var theWidth = $(this).width();
                var theHeight = $(this).height();
                if (theWidth < theHeight) {
                    $(this).height(150);
                }
                else {
                    $(this).width(150);
                }

            });
        });</script>
于 2012-11-11T17:50:48.983 に答える
3

max-width次のように、 プロパティとmax-heightプロパティを使用できるはずです。

img {
    max-width: 150px;
    max-height: 150px;
}

これにより、拡張せずにそのボックスに拘束されます。

150pxそれぞれが のサイズの正方形のボックスに表示されるようにしたい場合150pxは、各画像をコンテナー div に含めて、それらを正確にそのサイズにすることができます。

<div class="container">
  <img>
</div>

次の CSS を使用します。

img {
    max-width: 150px;
    max-height: 150px;
}
.container {
    width: 150px;
    height: 150px;
}
于 2012-11-11T17:54:27.193 に答える
-4

この形式を試してください...

<img src="image.jpg" style="border:none;position:absolute; top:20px; left:50px; width:100px; height:200px;">
于 2012-11-11T17:51:03.017 に答える