如何通过css让图片宽度不超过图片所在div的宽度

悬赏园豆：30 [待解决问题]

也就是不让图片撑开页面。

由于页面宽度是自适应屏幕的，div的宽度不是固定的，用max-width实现不了。

css

dudu | 高人七级 | 园豆：31003
提问于：2016-07-15 12:17

< >

所有回答(4)

图片设置为div的背景图片。

czd890 | 园豆：14312 (专家六级) | 2016-07-15 12:19

width:100%; 再用max-width

宁馨儿11 | 园豆：182 (初学一级) | 2016-07-15 12:26

如果图片的实际宽度小于div的宽度，就用图片的实际宽度

支持(0) 反对(0) dudu | 园豆：31003 (高人七级) | 2016-07-15 13:05

@dudu: 图片宽度小于div宽度，img:width:100%;max-width:图片的宽度; div也要给宽度，这样图片的宽度100%，才会有效

支持(0) 反对(0) 宁馨儿11 | 园豆：182 (初学一级) | 2016-07-15 13:20

@宁馨儿11: 如果图片宽度是100px，div宽度是200px，原封不动；如果图片宽度是300px，div宽度是200px，图片宽度用200px。

支持(0) 反对(0) dudu | 园豆：31003 (高人七级) | 2016-07-15 13:29

@dudu: 如果是用于电脑端，img:width:200px;如果是用于手机端，图片的父类div给宽度，图片本身：width:100%,max-width:200px;

支持(0) 反对(0) 宁馨儿11 | 园豆：182 (初学一级) | 2016-07-15 13:49

设置图片的宽和高继承父级div应该可以吧

CodeHsu | 园豆：5468 (大侠五级) | 2016-07-15 13:17

img {
  display: block;
  height: auto;
  max-width: 100%;
}

这样就行了

by.Genesis | 园豆：2719 (老鸟四级) | 2016-07-15 13:37

100%会撑开页面

支持(0) 反对(0) dudu | 园豆：31003 (高人七级) | 2016-07-15 13:46

@dudu: 直接上代码吧

支持(0) 反对(0) by.Genesis | 园豆：2719 (老鸟四级) | 2016-07-15 14:44

支持(0) 反对(0) dudu | 园豆：31003 (高人七级) | 2016-07-15 15:18

清除回答草稿

您需要登录以后才能回答，未注册用户请先注册。

欢迎，请先 登录 或者 注册 。