6

さまざまな（不明な）サイズの画像がたくさんあります。

これらの画像をdivにドロップし、アスペクト比を維持しながら、divの寸法に自動的に一致させたいと思います。

つまり、画像の幅が高さよりも広い場合、幅は100％になり、高さはそれに応じて拡大縮小されます。画像が幅よりも高い場合、高さは100％になり、幅はそれに応じて拡大縮小されます。

純粋なCSSでこれを行う方法はありますか？

ありがとう

4

4 に答える 4

10

cssプロパティmax-widthとmax-height画像を使用すると、必要な場所に移動できます。

フィドル

http://fiddle.jshell.net/sHAQ9/

HTML

<div>    
    <img src="http://dummyimage.com/200x300/000000/ffffff.png&text=tall%20image"/>
</div>
<div>    
    <img src="http://dummyimage.com/300x200/000000/ffffff.png&text=wide%20image"/>
</div>

CSS

div {
    width: 150px;
    height: 150px;    
    overflow: hidden;
    background: #ccc;
    margin: 10px;
    text-align: center;
    line-height: 150px;
}
div img {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
}
于 2013-03-20T15:40:03.630 に答える
2

私はギャラリーの設定でこれを行います：

.ScaledImg {
    max-width:100%:
    max-height:100%;
}

imgは、アスペクト比を維持しながら、これに基づいて親/コンテナの寸法に合わせて拡大縮小します。私はこれをimgs以外で試したことはありませんが、うまく機能します。widthまたはheight宣言は必要ありません。

于 2013-03-20T15:37:44.360 に答える
0

これを試して：

<style>
    .fit_image img {
        max-width: 100%;
        max-height: 100%;
    }
    .fit_image {
        width: 400px;
        height: 200px;
    }
</style>

<div class="fit_image">
     <img src="/path/to/image.jpg">
</div>
于 2013-03-20T15:37:51.777 に答える
0

@iambriansreedフィドルに基づいて
、画像がコンテナよりも小さい場合はズームを使用します

div img {
    zoom: 10;
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
}

http://fiddle.jshell.net/vcapr0k8/

于 2017-01-11T14:06:09.083 に答える