如何在较小的空间内拍摄大图

时间：2015-02-16 03:09:56

标签： javascript jquery css html5 css3

在我正在设计的页面中，创建了一个小圆形NAV，我想在其上显示图片！但是，当然，图片非常大，当我使用它时，它会越过边界而变得混乱！

如何在那个狭小的空间里进入更大的画面？

圆的尺寸为97-97

提前谢谢！

HTML 

<body>
<div class="wrap">
<div class="main_layout">
    <div id="container1">
        <div id="logo"></div>
        <div id="horizontal_line"></div>
        <div id="jewellery1"></div>
        <div id="jewellery2"></div>
        <div id="jewellery3"></div>
        <div id="jewellery4"></div>
        <div id="jewellery5"></div>
    </div>
    <div id="container2">
        <header>
            <div id="header-top">
                    <div id="links">
                    <div id="f"></div>
                    <div id="g"></div>
                    <div id="t"></div>
                    <div id="pint"></div>
                    <div id="register">Register Now</div>
                    <div id="vertical_line"></div>
                    <div id="sign_in">Sign in</div>
                    </div>
            </div>
            <div id="slider"></div>
        </header>
            <div id="search_bar">

            </div>
    </div>  

</div>
</div>
</body>
</html>

的CS 

.wrap {
    margin:0px;
    padding:0px;
    width:100%;
    text-align:center;
}

body {
    margin:0px;
    padding:0px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    text-align:center;      
}
.main_layout {
    padding:0px;
    margin-left:40px;
    width:1280px;
    height:1024px;

}

#container1 {
    alignment-adjust:central;
    margin-left:auto;
    margin-right:auto;
    margin-top:0px;
    margin-bottom:0px;
    padding-top:0px;
    padding-bottom:0px;
    width:275px;
    height:1024px;
    float:left;
    background:#333333 no-repeat fixed;
    background-attachment:fixed;
}

#logo {
    width:255px;
    height:245px;
    margin-left:28px;
    margin-top:15px;
    background:url(../Icons%20n%20pics/logo4.png) no-repeat;
}

#horizontal_line {
    width:90%;
    height:1px;
    background:#FFF no-repeat;
    margin-left:13px;
    margin-top:0px;
    box-shadow:0px 0px 5px #999;
}

#jewellery1 {
    border-radius:50%;
    background:#FFF;
    width:97px;
    height:97px;
    margin-left:auto;
    margin-right:auto;
    margin-top:60px;
    box-shadow:0px 6px 3px #000;
    -ms-box-shadow:0px 6px 3px #000;  
    -o-box-shadow:0px 6px 3px #000;  
    -moz-box-shadow:0px 6px 3px #000;  
    -webkit-box-shadow:0px 6px 3px #000; 
}

#jewellery1_pic {
    background:"http://www.ansjewelry.com/images/NEC211_des.jpg";
    background-size:cover;
    width:inherit;
    height:inherit;
}

#jewellery2 {
    border-radius:50%;
    background:#FFF;
    width:97px;
    height:97px;
    margin-left:auto;
    margin-right:auto;
    margin-top:7px;
    box-shadow:0px 6px 3px #000; 
    -ms-box-shadow:0px 6px 3px #000;  
    -o-box-shadow:0px 6px 3px #000;  
    -moz-box-shadow:0px 6px 3px #000;  
    -webkit-box-shadow:0px 6px 3px #000;
}

#jewellery3 {
    border-radius:50%;
    background:#FFF;
    width:97px;
    height:97px;
    margin-left:auto;
    margin-right:auto;
    margin-top:7px;
    box-shadow:0px 6px 3px #000; 
    -ms-box-shadow:0px 6px 3px #000;  
    -o-box-shadow:0px 6px 3px #000;  
    -moz-box-shadow:0px 6px 3px #000;  
    -webkit-box-shadow:0px 6px 3px #000;
}

#jewellery4 {
    border-radius:50%;
    background:#FFF;
    width:97px;
    height:97px;
    margin-left:auto;
    margin-right:auto;
    margin-top:7px;
    box-shadow:0px 6px 3px #000;
    -ms-box-shadow:0px 6px 3px #000;  
    -o-box-shadow:0px 6px 3px #000;  
    -moz-box-shadow:0px 6px 3px #000;  
    -webkit-box-shadow:0px 6px 3px #000; 
}

#jewellery5 {
    border-radius:50%;
    background:#FFF;
    width:97px;
    height:97px;
    margin-left:auto;
    margin-right:auto;
    margin-top:7px;
    box-shadow:0px 6px 3px #000;
    -ms-box-shadow:0px 6px 3px #000;  
    -o-box-shadow:0px 6px 3px #000;  
    -moz-box-shadow:0px 6px 3px #000;  
    -webkit-box-shadow:0px 6px 3px #000;  
}

#container2 {
    alignment-adjust:central;
    margin-left:9px;
    margin-right:9px;
    width:985px;
    height:1024px;
    float:right;
    background:-webkit-linear-gradient(#FFF,#ece5da);
    background:-o-linear-gradient(#FFF,#ece5da);
    background:-moz-linear-gradient(#FFF,#ece5da);
    background:linear-gradient(#FFF,#ece5da);
}

header {
    width:985px;
    height:310px;
    margin-top:0px;
}

#header-top {
    width:985px;
    height:50px;
    padding-bottom:5px;
    padding-top:5px;
    border-bottom:1px #000 outset;
}

#links {
    width:409px;
    height:40px;
    margin-bottom:5px;
    margin-top:5px;
    float:right;
}

#f {
    height:40px;
    width:40px;
    background:url(../Icons%20n%20pics/facebook.png);
    float:left;
}

#t {
    height:40px;
    width:40px;
    background:url(../Icons%20n%20pics/twitter.png);
    float:left;
    margin-left:5px;
}

#g {
    height:40px;
    width:40px;
    background:url(../Icons%20n%20pics/google_plus.png);
    float:left;
    margin-left:5px;
}


#pint {
    height:40px;
    width:40px;
    background:url(../Icons%20n%20pics/pinterest.png);
    float:left;
    margin-left:5px;
}

#register {
    margin-top:12px;
    margin-bottom:0px;
    height:40px;
    width:auto;
    float:left;
    margin-left:20px;
    font:"Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size:16px;
}

#vertical_line {
    height:40px;
    width:auto;
    float:left;
    margin-left:7px;
    border-left:thin solid #000;
}

#sign_in {
    margin-top:12px;
    height:40px;
    width:auto;
    float:left;
    margin-left:7px;
    font:"Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size:16px;
}

#slider {
    padding:0px;
    width:985px;
    height:199px;
    border-bottom:#000 1px outset;
}

#search_bar {
    width:985px;
    height:60px;
    margin-top:-49px;
    background:#39F;
}

3 个答案:

答案 0 :(得分：1)

编辑：我创建了一个粘贴代码的小提琴。

你没有正确的背景图片语法。

http://jsfiddle.net/rnnj3ebc/

尝试将图像设置为圆角元素的背景图像：

#nav {
    width:97px;
    height:97px;
    background:url('http://www.ansjewelry.com/images/NEC211_des.jpg') no-repeat center center;
    background-size:cover;
    border-radius:97px;
    border:1px solid #ccc;
}

http://jsfiddle.net/qpm0a6mm/

答案 1 :(得分：0)

您可以使用CSS将图像的高度和宽度设置为您需要的尺寸。因此，假设您的图片id为navPic。

然后，你可以写这个CSS：

#navpic {    
    width: 97px; 
    height: 97px;
}

当然，根据您是否希望图片完全适合，调整宽度和高度。

答案 2 :(得分：0)

使用css属性：

background-size:cover;
相关问题
最新问题