-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 に答える