javascript - 如何在较小的空间中放置大图片-6ren

javascript - 如何在较小的空间中放置大图片

转载作者：太空宇宙更新时间：2023-11-04 12:18:22

在我正在设计的页面中，创建了一个小圆形 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>

CSS

.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;
}

最佳答案

编辑:我用您粘贴的代码创建了一个 fiddle 。

您的背景图片语法不正确。

http://jsfiddle.net/rnnj3ebc/

尝试将图像设置为圆 Angular 元素的背景图像:

#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/

关于javascript - 如何在较小的空间中放置大图片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28534003/