css 图片随屏幕等比例缩放

最新推荐文章于 2024-05-22 14:34:14 发布

qlwangke007

最新推荐文章于 2024-05-22 14:34:14 发布

阅读量2.5k

点赞数 1

分类专栏： HTML CSS

原文链接：https://www.jianshu.com/p/e87863cc2cd2

版权

HTML CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

转载自：https://www.jianshu.com/p/e87863cc2cd2

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

单个图片缩放
图片在盒子内缩放

裸图片的缩放

<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>

图片在一个盒子内

<style type="text/css">

  #box {
    width: auto;  /* 盒子也要自动缩放 */
    width: auto; 
    max-width: 600px;
    max-height: 500px; /* 盒子的高度,需要大于图片100%宽度时 图片的高度 */
    border: 5px solid yellow;
  }

  img {
    width: auto;
    height: auto;
    max-width: 100%; /* 只要宽度100% 结合前面 auto就可以了 */
  }

</style>
<body>
  <div id="box">
    <img src="https://i.loli.net/2018/06/17/5b2639a6e6c61.jpeg" alt="timg.jpeg" title="timg.jpeg" />
    下面的文字
  </div>
</body>

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

qlwangke007

关注关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
css 图片随屏幕等比例缩放

转载自：https://www.jianshu.com/p/e87863cc2cd2有时我们希望图片能随屏幕大小的缩放而缩放，两种情况：单个图片缩放图片在盒子内缩放裸图片的缩放<style type="text/css"> img { width: auto; height: auto; max-width: 100%; m...
复制链接

扫一扫