Heim  >  Artikel  >  Web-Frontend  >  So passen Sie Bilder in CSS an die Bildschirmgröße an

So passen Sie Bilder in CSS an die Bildschirmgröße an

王林
王林Original
2020-11-11 13:56:5323854Durchsuche

css让图片自适应屏幕大小的方法:在css文件中加入代码【img {height: auto; width: auto\9; width:100%;}】即可。如果我们只想更改特定的图片,那么可以使用方法【height: auto;】。

So passen Sie Bilder in CSS an die Bildschirmgröße an

本教程操作环境:windows10系统、css3,本文适用于所有品牌的电脑。

如果想让图片自适应屏幕的大小,那么在css代码里加入如下代码即可

(学习视频分享:java视频教程

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

用max-width设置,如果图片尺寸大于当前浏览器尺寸就自动缩放,图片的高度设置正比缩放。

height:auto,相关元素的高度取决于浏览器。

代码如下:

<img src="..." class="img-responsive" alt="响应式图像">

如果只想改特定的图片

.img-responsive {
  display: inline-block;
  height: auto;
  max-width: 100%;
}

相关推荐:CSS教程

Das obige ist der detaillierte Inhalt vonSo passen Sie Bilder in CSS an die Bildschirmgröße an. 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