1

我这里有一个 JS 小提琴。自从我从事 CSS 和 HTML 工作以来已经有一段时间了......

http://jsfiddle.net/Peege151/4Au3c/ 这是 HTML

 <body>
    <div id="logo" style="font-family: AlexBrush-Regular;font-size:500%">
        XYZ
    </div>
    <div id="content">
        <div id="navbar">
            Item Item Item
        </div>

        <div id="main">
                <div id="fb">

                </div>
              <div id="tweet">

                </div>
            <img src="/emmybg.jpg" alt=""style ="height:600px">


        </div>

    </div>
     </body>

这是我的CSS

   body {
    background-color:#666666;
    text-align: center`
}
#content{
    width: 75%;
    background-color:#666666;
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 3%;
}
#navbar{
    height:30px;
    width:100.4%;
    background-color:#000000;  
    color: #ffffff
}
@font-face {font-family: AlexBrush-Regular; src: url('AlexBrush-Regular.ttf');} 
logo {
    font-family: AlexBrush-Regular;
    text-align:center;
}
#tweet {
    float:right;
    width:17%;
    height:600px;
    border:solid red;
}
#fb {
    float:left;
    width:17%;
    height:600px;
    border:solid red;
}
#main {
    height:600px; 
    width:100%; 
    border: solid black;
    overflow:hidden;
}
#main .img{
    float:left;
        height:500px;
        border: solid black;

}
#footer{
    height:30px;
    background-color:#000000;  
    color: #ffffff
}

注意 JSFiddle - 当页面调整大小时，那些红色内容框保持相同大小。在这些中间，我有一个图像......当页面调整大小时，图像会弹出另一行。我想强制图像保持一致......”

不过，如果可能的话，我希望图像在红色内容框下“消失”，因此纵横比不会改变。如果它们超出红色框的远边缘，我将在那里隐藏溢出。

那可能吗？希望我已经清楚地表达了我的问题。

谢谢你的帮助！

4

1 回答 1

0

尝试将图像设置为背景，而不是<img>标签？

我将这些添加到#content 样式中

background-image:url(http://placekitten.com/600/600); /* I used a placekitten since I can't see your example image*/
background-repeat:no-repeat;
background-position:center center;

请注意，background-position:center center;如果图像太大，确保两侧被切断，但图像始终位于中心。

这是一个更新的小提琴：http: //jsfiddle.net/4Au3c/2/

于 2013-11-05T23:13:25.507 回答