Heim  >  Artikel  >  Web-Frontend  >  So legen Sie die Größe des IMG-Bildes in CSS fest

So legen Sie die Größe des IMG-Bildes in CSS fest

下次还敢
下次还敢Original
2024-04-26 11:48:13560Durchsuche

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 Größe des IMG-Bildes in CSS fest

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:

  • width: Legen Sie die Breite des Bildes fest.
  • Höhe: Stellen Sie die Höhe des Bildes ein.

Feste Größe festlegen

Um ein Bild mit fester Größe festzulegen, können Sie die Attribute width bzw. height verwenden: widthheight 属性:

<code class="css">img {
  width: 200px;
  height: 150px;
}</code>

设置相对大小

您还可以使用百分比值来设置图片的相对大小,使其适应容器的大小:

<code class="css">img {
  width: 100%;
  height: auto;
}</code>

保持图片宽高比

要保持图片的宽高比,可以使用 max-widthmax-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: 🎜rrreee

Das 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!

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