css如何让图片自适应屏幕大小


本文摘自PHP中文网,作者V,侵删。

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

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

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

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

1

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

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

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

代码如下:

1

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

如果只想改特定的图片

1

2

3

4

5

.img-responsive {

  display: inline-block;

  height: auto;

  max-width: 100%;

}

相关推荐:CSS教程

以上就是css如何让图片自适应屏幕大小的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

css中:not用法是什么

jq怎么恢复原来的css样式

什么是css,其主要作用是什么

css min-width属性怎么用

css搜索框怎么写

css中float属性的属性值有哪些

css中怎么把ul居中

css怎么隐藏div

html如何选择li的偶数列

css由什么组成

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...