css怎么让图片随屏幕变化大小

PHP中文网 JavaScript 百度已收录

本文摘自PHP中文网，作者藏色散人，侵删。

css让图片随屏幕变化大小的方法：1、利用“width height auto”属性来缩放图片；2、利用“max-width max-height”属性来设置最大宽高。

本教程操作环境：windows7系统、css3版，Dell G3电脑。

推荐：《css视频教程》

有时我们希望图片能随屏幕大小的缩放而缩放，两种情况：

  • 单个图片缩放

  • 图片在盒子内缩放

裸图片的缩放

1

2

3

4

5

6

7

8

9

10

11

<style type="text/css">

  img {

    width: auto;

    height: auto;

    max-width: 100%;

    max-height: 100%;

  }

</style>

<body>

  <img src="https://i.loli.net/2018/06/17/5b2639a6e6c61.jpeg" alt="timg.jpeg" title="timg.jpeg" />

</body>

1b94ff8320092e1a8e68ba0ce508c23.png

阅读剩余部分

相关阅读 >>

页面性能优化的方法总结

css text-align属性怎么用

css3跟css区别是什么

css里的rgb怎么用

css的字体样式如何设置

css中常用的水平垂直居中对齐方法有哪些

css h1不占一行怎么办

css背景图片显示不完整怎么办

css选择器有哪些？哪些属性是可以继承的？

怎样实现meta标签中的viewport来控制设备屏幕的css属性

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




标签：

打赏

取消

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

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

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

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

相关推荐

评论

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