这些图像如何适合屏幕？

Question

我有这个网站：

link

观看此屏幕截图，以便更好地了解他们想要做的事情。

http://i60.tinypic.com/34y5p3b.jpg

正如您可以看到我的照片（底部两张）不适合屏幕并被切断。它们如何适应屏幕？

代码HTML：

   <div id="main-content" class="main-content ">
    <div id="primary" class="content-area">
        <div id="content" class="site-content" role="main">
            <div class="entry-content">
                <p>
                   <a href="http://bagel.dg-site.com/bagel/wp-content/uploads/2015/07/BANNER.png"><img style="width:100%;" src="http://bagel.dg-site.com/bagel/wp-content/uploads/2015/07/BANNER-300x215.png" alt="BANNER" class="img-responsive"></a>
                  <a href="http://bagel.dg-site.com/bagel/wp-content/uploads/2015/07/NEWS2.png"><img src="http://bagel.dg-site.com/bagel/wp-content/uploads/2015/07/NEWS2-300x246.png" alt="NEWS2" width="300" height="246" class="alignnone size-medium wp-image-22"></a>
                 <a href="http://bagel.dg-site.com/bagel/wp-content/uploads/2015/07/NEWS1.png"><img src="http://bagel.dg-site.com/bagel/wp-content/uploads/2015/07/NEWS1-300x246.png" alt="NEWS1" width="300" height="246" class="alignnone size-medium wp-image-21"></a>     
                </p>
            </div>
        </div>
    </div>        
</div>

CODE CSS：

 #main-content{background:red;padding:0px;height:527px;overflow:hidden;width:1251px;}

    #main-content > #primary.content-area {
      float: none;
      width: auto;
      padding: 0;
    }

    .page .entry-content {
      padding-top: 0;
    }

这可以通过Javascript以某种方式解决吗？ （JQuery的？） 我不知道如何解决这个问题。请你帮我一些建议吗？

Answer 1

请参阅此Fiddle
的 HTML：

<div id="bottom">
   <div class="top">
        <div class="table">
            <div class="table-cell">
                <img class="rs" src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg"/>
                Responsive image.
            </div>
        </div>
    </div>
</div>

<div class="square">
   <div class="content">
        <div class="table">
            <div class="table-cell">
                <img class="rs" src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg"/>
                Responsive image.
            </div>
        </div>
    </div>
</div>
<div class="square">
    <div class="content">
        <div class="table">
            <div class="table-cell">
               <img class="rs" src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg"/>
                Responsive image.
            </div>
        </div>
    </div>
</div>

<强> CSS：

.square {
    float:left;
    position: relative;
    width: 45%;
    padding-bottom : 45%; /* = width for a 1:1 aspect ratio */
    margin:1.66%;
    background-color:#1E1E1E;
    overflow:hidden;
}

.content {
    position:absolute;
    height:90%; /* = 100% - 2*5% padding */
    width:90%; /* = 100% - 2*5% padding */
    padding: 5%;

}

.content {
    height:90%; /* = 100% - 2*5% padding */
    width:90%; /* = 100% - 2*5% padding */
    padding: 5%;

}

.table{
    display:table;
    width:100%;
    height:100%;
}
.table-cell{
    display:table-cell;
    vertical-align:middle;
}
/*  For list */
ul{
    text-align:left;
    margin:5% 0 0;
    padding:0;
    list-style-position:inside;
}
li{
    margin: 0 0 0 5%;
    padding:0;
}


/*  For responsive images */

.content .rs ,.top .rs{
    width:auto;
    height:auto;
    max-height:90%;
    max-width:100%;
}

/*  For responsive images as background */

.bg{
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover; /* you change this to "contain" if you don't want the images to be cropped */
    color:#fff;
}

.img1{
    background-image: url('https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg');
}
.img2{
    background-image: url('https://farm7.staticflickr.com/6217/6216951796_e50778255c.jpg');
}
.img3{
    background-image: url('https://farm4.staticflickr.com/3794/13893055574_3df0ab636b.jpg');
}

/*  following just for the demo */


body {
    font-size:20px;
    font-family: 'Lato',verdana, sans-serif;
    color: #fff;
    text-align:center;
    background:#ECECEC;
}
p{
    margin:0;
    padding:0;
    text-align:left;
}

.numbers{
    font-weight:900;
    font-size:100px;
}

#bottom {
    clear:both;
    margin:0 1.66%;
    width:89.68%;
    padding: 3.5%;
    background-color:#1E1E1E;
    color: #fff;
}
#bottom p{
    text-align:center;
    line-height:2em;
}
#bottom a{
    color: #000;
    text-decoration:none;
    border:1px solid #000;
    padding:10px 20px 12px;
    line-height:70px;
    background:#ccc;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#bottom a:hover{
    background:#ECECEC;
    border:1px solid #fff;
}