-1

我真的很想增加我博客上的图像大小。目前，图像非常小。

我的主题是使用 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/

4

3 回答 3

0

我想知道“扭曲”是指它们不成比例，在这种情况下，只设置宽度或高度值（不是两者），其余值将与图像大小成比例增加。

例子：

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

.new-height{
height: 140px;
}
于 2013-11-13T16:00:22.713 回答
0

如果您正在从事响应式设计，那么多年来图像大小一直是一个巨大的问题。您可以使图像采用织物的尺寸，也就是说

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

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

插件的使用：

我推荐以下->

https://github.com/scottjehl/picturefill - 图片填充

或者，您可以按照自己的方式根据需要提供正确的图像尺寸。

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

可以在这个令人惊叹的网站上找到对媒体查询基础知识的非常深入的解释：

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

于 2013-11-13T16:00:53.457 回答
0

我解决了。首先我发现通过编辑“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。

于 2013-11-14T17:45:45.787 回答