骨架网格的递减边缘

Question

我应该牺牲960px的网格来让一个部分完全流畅/全宽吗?

我正在制作网站的人真的希望在说话部分的图像裁剪(缩短)，因此它将比其他2列短，除非所有3列都变宽。我把它们定义为1/3列的骨架宽度。

在演讲部分是否有一个简单的方法来制作:增加三列的宽度，从而使整个section/row在整个屏幕上更宽(大于960像素)/span，同时仍然由骨架网格定义。

(这里的简单是指对CSS框架的最小操作)

的url: http://tinyurl.com/qbrjqne

<section>
    <h3 id='speaking'></h3>
    <div class="container">             
        <div class='one-third column'></div>
        <div class='one-third column'></div>
        <div class="one-third column">
            <section class='whitemission'>
            </section>
        </div>
    </div>
</section>

--- base/main style --- 
@media only screen and (max-width: 767px) and (min-width: 480px)
.container .one-third.column, .container .eight.columns, .container .four.columns {margin: 50px 0; padding: 45px 0;}
-- skeleton--
.container  { position: relative; width: 960px; margin: 0 auto; padding: 0; }
.container .column,
.container .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
.container .one-third.column  { width: 300px; }

Answer 1

一种简单的方法是将第一列设置为"六列"，第二列和第三列设置为"五列"。然后图像将比文本列略宽。也许这样会更适合裁剪后的图像。

但是，图像在768- 960的网格中就不像在960及以上的网格中那样适合了。

要解决这个问题，你可以显示一个不同的裁剪图像。如果可以的话。我知道这有点脏，但很简单。div;)