使图像适合css

Question

我正在编辑Dreamweaver中的模板，我想知道如何填充长图像的左侧和右侧，使其不是空白区域。

很抱歉，如果这是一个愚蠢的问题，但我找不到答案。

图片位置设置为宽度和高度均为100％。

CSS

 /* ==================================================
   Section Portfolio
================================================== */

.type-work {
    color: #FFFFFF;
    font-size: 24px;
    font-weight: 300;
    margin-bottom: 30px;
    line-height: 1em;
    text-transform: uppercase;
}

.work-nav #filters {
    margin: 0;
    padding: 0;
    list-style: none;
}

.work-nav #filters li {
    margin: 0 0 30px 0;
    padding: 0;
}

.work-nav #filters li a {
    color: #7F8289;
    font-size: 16px;
    display: block; 
}

.work-nav #filters li a:hover {
    color: #FFFFFF;
}

.work-nav #filters li a.selected {
    color: #DE5E60;
}

#thumbs {
    margin: 0;
    padding: 0; 
}

#thumbs li {
    list-style-type: none;
}

.item-thumbs {
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
    cursor: pointer;
}

.item-thumbs a + img {
    width: 100%;
    height: 100%;   
}

.item-thumbs .hover-wrap {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;

    opacity: 0;
    filter: alpha(opacity=0);

    -webkit-transition: all 450ms ease-out 0s;  
       -moz-transition: all 450ms ease-out 0s;
         -o-transition: all 450ms ease-out 0s;
            transition: all 450ms ease-out 0s;

    -webkit-transform: rotateY(180deg) scale(0.5,0.5);
       -moz-transform: rotateY(180deg) scale(0.5,0.5);
        -ms-transform: rotateY(180deg) scale(0.5,0.5);
         -o-transform: rotateY(180deg) scale(0.5,0.5);
            transform: rotateY(180deg) scale(0.5,0.5);  
}

.item-thumbs:hover .hover-wrap,
.item-thumbs.active .hover-wrap {
    opacity: 1;
    filter: alpha(opacity=100);

    -webkit-transform: rotateY(0deg) scale(1,1);
       -moz-transform: rotateY(0deg) scale(1,1);
        -ms-transform: rotateY(0deg) scale(1,1);
         -o-transform: rotateY(0deg) scale(1,1);
            transform: rotateY(0deg) scale(1,1);
}

.item-thumbs .hover-wrap .overlay-img {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #DE5E60;

    opacity: 0.80;
    filter: alpha(opacity=80);
}

.item-thumbs .hover-wrap .overlay-img-thumb {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -16px 0 0 -16px;
    color: #FFFFFF;
    font-size: 32px;
    line-height: 1em;

    opacity: 1;
    filter: alpha(opacity=100);
}

HTML（仅适用于一个图像，因为它们所有图像的代码相同。）

<!-- Item Project and Filter Name -->
                        <li class="item-thumbs span3 bussines_cards">
                            <!-- Fancybox - Gallery Enabled - Title - Full Image -->
                            <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="Naslov" href="_include/img/home_img_sections/bussines_cards/02.jpg">
                                <span class="overlay-img"></span>
                                <span class="overlay-img-thumb font-icon-plus"></span>
                            </a>
                            <!-- Thumb Image and Description -->
                            <img src="_include/img/home_img_sections/bussines_cards/02.jpg" alt="Opis">
                        </li>
                        <!-- End Item Project -->