Responsive-Webdesign - Bild

Verwenden Sie die Eigenschaft width

Wenn width Eigenschaft auf Prozente zu setzen und die Höhe auf "auto" zu setzen, dann skaliert das Bild entsprechend aufweiten oder verkleinern:

Beispiel

img {
  width: 100%;
  height: auto;
}

Probieren Sie es selbst aus

Bitte beachten Sie, dass das Bild im obigen Beispiel größer als seine ursprüngliche Größe skaliert werden kann. In den meisten Fällen ist es besser, stattdessen max-width Eigenschaft.

Verwenden Sie die Eigenschaft max-width

Wenn die Eigenschaft max-width auf 100% gesetzt ist, wird das Bild auf Anforderung verkleinert, aber niemals größer als seine ursprüngliche Größe vergrößert:

Beispiel

img {
  max-width: 100%;
  height: auto;
}

Probieren Sie es selbst aus

Fügen Sie dem Beispiel-Webseitenbild hinzu

Beispiel

img {
  width: 100%;
  height: auto;
}

Probieren Sie es selbst aus

Hintergrundbild

Das Hintergrundbild kann ebenfalls auf Änderungen der Größe und des Skalierungsfaktors reagieren.

Dies sind die drei verschiedenen Methoden, die wir präsentieren:

1. Wenn background-size Wenn die Eigenschaft auf "contain" gesetzt ist, wird das Hintergrundbild skaliert und versucht, dem Inhaltsbereich zu entsprechen. Das Bild behält jedoch sein Seitenverhältnis (das Verhältnis zwischen Breite und Höhe des Bildes):

这是 CSS 代码：

Beispiel

div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-repeat: no-repeat;
  background-size: contain;
  border: 1px solid red;
}

Probieren Sie es selbst aus

2. 如果将 background-size 属性设置为 "100% 100%"，则背景图像将拉伸以覆盖整个内容区域：

这是 CSS 代码：

Beispiel

div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-size: 100% 100%;
  border: 1px solid red;
}

Probieren Sie es selbst aus

3. 如果 background-size 属性设置为 "cover"，则背景图像将缩放以覆盖整个内容区域。请注意，"cover" 值保持长宽比，且可能会裁剪背景图像的某部分：

这是 CSS 代码：

Beispiel

div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-size: cover;
  border: 1px solid red;
}

Probieren Sie es selbst aus

为不同设备准备不同图像

大幅的图像在大型计算机屏幕上可以完美显示，但在小型设备上就没用了。为什么在不得不缩小图像时又加载大图像呢？为了减少负载或出于任何其他原因，您可以使用媒体查询在不同的设备上显示不同的图像。

这是一幅大图像和一幅小图像，会在不同的设备上显示：

Beispiel

/* 针对小于 400 像素的宽度： */
body {
  background-image: url('img_smallflower.jpg'); 
}
/* 针对 400 像素或更大的宽度： */
@media only screen and (min-width: 400px) {
  body { 
    background-image: url('img_flowers.jpg'); 
  }
}

Probieren Sie es selbst aus

您可以使用媒体查询 min-device-width 而不是 min-width 来检查设备宽度，而不是浏览器宽度。然后，当您调整浏览器窗口的大小时，图像将不会变化：

Beispiel

/* 针对小于 400 像素的设备： */
body {
  background-image: url('img_smallflower.jpg'); 
}
/* 针对 400 像素及更大的设备： */
@media only screen and (min-device-width: 400px) {
  body { 
    background-image: url('img_flowers.jpg'); 
  }
}

Probieren Sie es selbst aus

HTML5 <picture> 元素

HTML5 引入了 <picture> 元素，该元素使您可以定义多幅图像。

浏览器支持

38.0 13 38.0 9.1 25.0

<picture> 元素的作用类似于 <video> 和 <audio> 元素。我们设置了不同的来源，而匹配优先权的第一个来源是正在使用的来源：

Beispiel

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 400px)">
  <source srcset="img_flowers.jpg">
  <img src="img_flowers.jpg" alt="Blumen">
</picture>

Probieren Sie es selbst aus

srcset Das Attribut ist obligatorisch und definiert die Quelle des Bildes.

media Das Attribut ist optional und akzeptiert CSS @media-Regel gefundenen Medienabfragen.

Hinweis:Sie sollten auch für nicht unterstützte <picture> Browserdefinierte Elemente <img> Element.