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

This topic created in 5260 days ago, the information mentioned may be changed or developed.

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

12 replies • 1970-01-01 08:00:00 +08:00

Hyperion

Jan 12, 2012

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

bitsmix

Jan 12, 2012

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

joynic

Jan 12, 2012

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

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

flyingkid

Jan 12, 2012

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

```

joynic

Jan 12, 2012

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

cmonday

Jan 12, 2012

@joynic 不要用expression

Hyperion

Jan 12, 2012

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

Sivan

Jan 12, 2012

@joynic 还要加一句 height:auto;

Sivan

Jan 12, 2012

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

joynic

Jan 12, 2012

@Sivan 嘿嘿。谢谢。

ywjno

Jan 12, 2012

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

joynic

Jan 12, 2012

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

这样可以了。