Heim > Artikel > Web-Frontend > So ändern Sie die Bildgröße mit dem Bildschirm in CSS
So ändern Sie die Bildgröße mit dem Bildschirm in CSS
- 藏色散人Original
- 2020-12-08 09:40:528200Durchsuche
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>
- ps:1. Verwenden Sie „Width Height Auto“ zum Zoomen
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!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So berechnen Sie das CSS-GewichtNächster Artikel：So berechnen Sie das CSS-Gewicht