如何用DIV+CSS控制图片大小范围?

 我来答
刺任芹O
2022-11-16 · TA获得超过6.1万个赞
知道顶级答主
回答量:38.7万
采纳率:99%
帮助的人:8110万
展开全部
  1. 使用CSS max-width和max-height实现图片自动等比例缩小

  2. 很简单我们要使用到max-width和max-height,这样即可设置对象图片最大宽度和最大高度,这样图片就会等比例缩放图片,然图片相对不变形清晰。

  3. 使用max-width:300px或max-height:100px,即可解决图片比例缩小。但这样存在一个问题,如果按照宽度缩放,但图片过高会超出溢出盒子,这个时候需要对父级使用overflow:hidden隐藏超出图片内容。但是使用max-width或max-height,IE6不支持,我们需要设置个width:expression(this.width > 300 ? "300px" : this.width);或者height:e­xpression(this.height>100?"100px":this.height);。

解决IE6支持max-height

div css解决IE6支持max-width

一般情况下只需要设置好宽度限制,比如这里只设置最大宽度为300px(max-width:300px),然后对父级使用overflow:hidden隐藏溢出图片,同时为了兼容IE6我们设置个width:expression(this.width > 300 ? "300px" : this.width);解决即可。

1、具体解决DIV+CSS实例代码如下:

<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8" /> 

<title>图片缩小不变形实例 www.divcss5.com</title> 

<style> 

.divcss5{ border:1px solid #000; width:300px; height:100px;overflow:hidden} 

.divcss5 img{max-width:300px;_width:expression(this.width > 300 ? "300px" : this.width);} 

</style> 

</head> 

<body> 

<div class="divcss5"> 

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式