ホームページ  >  記事  >  ウェブフロントエンド  >  CSSで画像を画面サイズに合わせる方法

CSSで画像を画面サイズに合わせる方法

王林
王林オリジナル
2020-11-11 13:56:5323989ブラウズ

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

CSSで画像を画面サイズに合わせる方法

本教程操作环境: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教程

以上がCSSで画像を画面サイズに合わせる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。