求解决正文图片过大溢出的方法。

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 4736 天前的主题，其中的信息可能已经有所发展或是发生改变。

我用V2EX的移动版主题做了一个wordpress主题，但是正文的图片过大页面会撑破，有没有好的解决办法？最好能让图片自适应。

12 条回复 • 1970-01-01 08:00:00 +08:00

Hyperion

2012-01-12 14:04:35 +08:00

可以给img一个max-width, IE下再做个hack.

bitsmix

2012-01-12 14:12:33 +08:00

如果是移动版的话，最好还是能缩小一下图片。
毕竟大图片走流量烧不起啊。

joynic

2012-01-12 14:17:44 +08:00

@Hyperion 谷歌到这样，但是图片变形了。

#topics_index .cell img {
max-width: 300px;
width: expression( this.width> 300 ? "300px" : (this.width+"px") );
}

flyingkid

2012-01-12 14:18:10 +08:00

```
<style>
.content { width:xxxxpx;overflow:hidden }
</style>
<div class="content">
<img src="xxx.jpg" width="xxx" height="xxxx" />
</div>

```

joynic

2012-01-12 14:25:19 +08:00

我没有说清楚。这个主题也是用于移动设备浏览的。电脑浏览是另外的主题。

cmonday

2012-01-12 14:30:18 +08:00

@joynic 不要用expression

Hyperion

2012-01-12 14:34:39 +08:00

@joynic 写一段JS吧, 要么就是去生成一批缩略图...

Sivan

2012-01-12 14:51:02 +08:00

@joynic 还要加一句 height:auto;

Sivan

2012-01-12 14:52:08 +08:00

@joynic 不针对电脑浏览就更不需要表达式了啊。直接max-width:300px;和height:auto;

joynic

2012-01-12 15:02:51 +08:00

@Sivan 嘿嘿。谢谢。

ywjno

2012-01-12 15:09:44 +08:00

加上这句能实现不？
<meta name="viewport" content="width=device-width, initial-scale=1">

joynic

2012-01-12 15:14:49 +08:00

#topics_index .cell img {
max-width: 100%;
height:auto;
}

这样可以了。