Question

我真的想在博客上增加图片尺寸。目前图像非常小。

我的主题是使用960网格系统，我无法弄清楚如何增加图像大小。我的960网格系统看起来像这样

/* Standard 960px ----------- */

.grid_1                             { width:48px; }
.grid_2                             { width:128px; }
.grid_3                             { width:208px; }
.grid_4                             { width:588px; }
.grid_5                             { width:368px; }        
.grid_6                             { width:448px; }
.grid_7                             { width:528px; }
.grid_8                             { width:960px; }
.grid_9                             { width:688px; }
.grid_10                            { width:768px; }
.grid_11                            { width:848px; }
.grid_12                            { width:960px; }

.column                             { margin:0 16px 0 16px; overflow:hidden; float:left; display:inline; }
.row                                { margin:0 auto; width:960px; overflow:hidden; }
.row .row                           { margin:0 -16px 0 -16px; width:auto; display:inline-block; }

在我的CSS中，控制图像的唯一方法是

.posts .post.photo div img{
height: auto;
max-width: 100%;
vertical-align:bottom; 
}

但是当我为此添加宽度和高度时，图像会失真。有没有办法让图像更大而不会扭曲它们？

以下是完整css的链接 - http://jsfiddle.net/x8P6w/

Answer 1

我想知道“失真”你的意思是它们不成比例，在这种情况下，只设置一个宽度或高度值（不是两者），剩下的值将增加与图像大小成比例。

示例：

.image{ 
height: 100px;
width: 200px;
}

.new-height{
height: 140px;
}

Answer 2

如果您正在进行响应式设计，多年来图像尺寸一直是个大问题。您可以使图像采用布料的尺寸，也就是说

.img{
    width: 100%;
    height: 100%;
}

或者您可以做其他一些事情：

使用插件：

我推荐以下 - ＆gt;

https://github.com/scottjehl/picturefill - Picturefill

或者您也可以根据自己的需要提供正确的图像尺寸。

最后一个涉及使用媒体查询来了解视口的大小以及您将要使用的图像或您将要使用的css类。

在这个神奇的网站上可以找到对媒体查询基础的非常深刻的解释：

http://css-tricks.com/css-media-queries/

Answer 3

我解决了这个问题。首先我发现通过编辑“grid_3”宽度，图片的高度和宽度增加了。其次，我添加了网格css这个 -

.column                             { margin:0 0px 0 0px; overflow:hidden; float:left; display:inline; }
.row                                { margin:0 auto; width:1035px; overflow:hidden; }
.row .row                           { margin:0 -10px 0 -10px; width:auto; display:inline-block; }

并将.row宽度增加到1035px。

无法增加图像尺寸

3 个答案: