Question

我这里有一个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 - 在页面调整大小时，这些红色内容框保持相同的大小。在那些中间，我有一个图像...... 调整页面大小时，图像会弹出另一行。我想强制图像保持在线......“

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

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

感谢您的帮助！

Answer 1

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

我将这些添加到#content styles

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/

Div重叠的图像？

1 个答案: