img宽度和全屏banner图注意事项

本文介绍了一种让全屏Banner图适应不同分辨率的方法,通过设置适当的宽度及利用CSS隐藏超出部分来确保图片不变形且在各种屏幕尺寸上都能良好显示。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<img src="banner.jpg" width="1900" height="400" />
img标签引用图片路径时会把整个图片的全貌都显示出来,若img指定宽度大于图片的实际宽度,则图片会被拉伸显示,若img指定的宽度小于图片的实际宽度,则图片会被挤压缩小显示,总之图片一定会显示出全貌而不能只显示局部。

在做全屏banner图时应考虑到PC显示器的分辨率有1024*768、1366*768、1440*768、1600*900、1900*1200等多种不同的尺寸大小,为了能适应所有分辨率下的PC,全屏banner图应按1900像素宽度制作,另为使banner图不变形,应像如下示例制作:
<div style="width:100%; height:400px; overflow:hidden;">
    <img src="banner.jpg" width="1900" height="400" style="margin-left:-267px;" />
</div>
其中margin-left:-267px;是js计算出的赋值结果。

这样在大屏幕下banner图会全貌显示,在小屏幕下banner图会显示中间的局部位置而不变形。




评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值