Heim > Artikel > Web-Frontend > So legen Sie die Größe des IMG-Bildes in CSS fest
Um die Bildgröße in CSS festzulegen, können Sie die folgenden Attribute verwenden: 1. Breite: Legen Sie die Breite des Bildes fest. 2. Höhe: Stellen Sie die Höhe des Bildes ein. 3. max-width und max-height: Behalten Sie das Seitenverhältnis des Bildes bei.
So legen Sie die Bildgröße in CSS fest
Um die Größe eines Bildes in CSS festzulegen, können Sie die folgenden Eigenschaften verwenden:
Feste Größe festlegen
Um ein Bild mit fester Größe festzulegen, können Sie die Attribute width
bzw. height
verwenden: width
和 height
属性:
<code class="css">img { width: 200px; height: 150px; }</code>
设置相对大小
您还可以使用百分比值来设置图片的相对大小,使其适应容器的大小:
<code class="css">img { width: 100%; height: auto; }</code>
保持图片宽高比
要保持图片的宽高比,可以使用 max-width
和 max-height
<code class="css">img { max-width: 100%; max-height: 100%; }</code>
Relative Größe festlegen
Sie können auch Prozentwerte verwenden, um die relative Größe des Bildes so einzustellen, dass es zur Größe des Containers passt:<code class="css">/* 设置固定大小的图片 */ img.fixed { width: 200px; height: 150px; } /* 设置相对大小的图片 */ img.relative { width: 100%; height: auto; } /* 保持图片宽高比 */ img.aspect-ratio { max-width: 100%; max-height: 100%; }</code>🎜Bildseitenverhältnis beibehalten🎜🎜🎜Um das Seitenverhältnis des Bildes beizubehalten, können Sie Verwenden Sie die Eigenschaften
max-width
und max-height
: 🎜rrreee🎜🎜Beispiel🎜🎜🎜Das folgende Beispiel zeigt, wie Sie diese Eigenschaften verwenden, um Bilder unterschiedlicher Größe festzulegen: 🎜rrreeeDas obige ist der detaillierte Inhalt vonSo legen Sie die Größe des IMG-Bildes in CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!