画像のサイズを画面に合わせて変更する CSS メソッド: 1. "width height auto" 属性を使用して画像を拡大縮小します; 2. "max-width max-height" 属性を使用して最大値を設定します幅と高さ。
このチュートリアルの動作環境: Windows 7 システム、css3 バージョン、Dell G3 コンピューター。
推奨: 「css ビデオ チュートリアル 」
画像を画面サイズに合わせて拡大縮小したい場合があります。次の 2 つの状況があります:
<style type="text/css">
img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
</style>
<body>
<img src="https://i.loli.net/2018/06/17/5b2639a6e6c61.jpeg" alt="timg.jpeg" title="timg.jpeg" />
</body>
<style type="text/css">
#box {
width: auto; /* 盒子也要自动缩放 */
height: auto;
max-width: 600px;
max-height: 500px; /* 盒子的高度,需要大于图片100%宽度时 图片的高度 */
border: 5px solid yellow;
}
img {
width: auto;
height: auto;
max-width: 100%; /* 只要宽度100% 结合前面 auto就可以了 */
}
</style>
<body>
<div id="box">
<img src="https://i.loli.net/2018/06/17/5b2639a6e6c61.jpeg" alt="timg.jpeg" title="timg.jpeg" />
下面的文字
</div>
</body>
2. max-width max-height を使用して、最大幅と高さを設定します。100% は元の最大値を意味します。
以上がCSSで画面ごとに画像のサイズを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
