响应式Web设计:维持高宽比的弹性图片

博客换上了Wordpress团队开发的Twenty Twelve主题,这个主题是响应式设计的,可以自适应任何设备屏幕尺寸.

但美中不足的是,Wordpress的编辑器会自动给图片加上width和height属性,导致弹性图片的高度保持一个定值,看起来的效果是这样的:

固定高度

好吧,谁能借我把锤子让我砸掉屏幕?

冷静!这个问题只要修改一处css就可以搞定.

找到主题的style.css文件中的这一处:

.entry-content img,
.comment-content img,
.widget img {
  max-width: 100%; /* Fluid images for posts, comments, and widgets */
}

现在我们把它修改成这样:

.entry-content img,
.comment-content img,
.widget img {
  max-width: 100%; /* Fluid images for posts, comments, and widgets */
  height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */
}

保存,然后清除缓存.

现在你看到的页面中的图片应该是维持高宽比的了:

自适应高度

还有另外一种方法是使用Wordpress的子主题功能,这可以在不破坏原主题的情况下对css进行修改,本站目前使用的就是这种方法.