So verwenden Sie CSS, um die Größe von Bildern mit dem Bildschirm zu ändern: 1. Verwenden Sie das Attribut „width height auto“, um das Bild zu skalieren. 2. Verwenden Sie das Attribut „max-width max-height“, um die maximale Breite und Höhe festzulegen .
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3-Version, Dell G3-Computer.
RECMIMMIVENDE: "CSS Video Tutorial".
Skalierung von Nacktbildern
<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>Bilder in einer Box
<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>Das obige ist der detaillierte Inhalt vonSo ändern Sie die Bildgröße mit dem Bildschirm in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
