图像自适应

图像自适应

想请教一下有没有办法实现图像宽度自适应屏幕宽度,图像高度随宽度缩放而等比放大,但是不要裁剪高度。

正在回答

登陆购买课程后可参与讨论,去登陆

3回答

你好,根据同学的描述,好像这张图片高度比宽度大,这样设置背景图片宽度为100%,高度按照宽高比自动伸缩,在垂直方向上会有一部分图片看不见。

如果想要宽高都能全部显示,可以使用background-size:cover;属性,但是宽高比可能会改变。

好帮手慕星星 2019-02-17 08:43:53

现在代码中div宽度是固定像素,如果想要div元素自适应屏幕宽度,设置宽度为百分比就可以了。

不知道同学说的是不是这种情况,如果还有疑问,可以继续提问。

  • 提问者 努力的茶树菇 #1
    我当时设置了div的宽度是100%,然后把background-image的宽度也设置成了100%,宽度的确没问题了,但是高度好像只显示了当前屏幕的高度,后面的部分就被自动裁去了。想请教您,有办法实现宽度自适应,然后高度跟着宽度等比缩放不会被裁剪的办法吗。
    2019-02-17 20:23:08
好帮手慕星星 2019-02-15 13:59:52

你好,在后面的课程中会讲到CSS3属性,有一个设置背景图片大小的属性:background-size。

例如:

img图片大小是100px(宽),100px(高);现在一个div是200px,300px,想要在水平方向上铺满div元素,垂直方向上宽高比自适应,如下:

http://img1.sycdn.imooc.com//climg/5c66549b000118f409530421.jpg

效果:

http://img1.sycdn.imooc.com//climg/5c6654ff0001255e02460327.jpg

在第二个阶段中会有详细的讲解,现在可以先了解测试下,

http://img1.sycdn.imooc.com//climg/5c66553b000146cd08320346.jpg

祝学习愉快!

  • 提问者 努力的茶树菇 #1
    还想继续请教一下,这样写的话只能铺满div,但是这样的话div会自己适应屏幕的宽度吗?
    2019-02-16 21:54:47
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师