在我正在设计的页面中，创建了一个小圆形 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 。
您的背景图片语法不正确。
尝试将图像设置为圆 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;
}
关于javascript - 如何在较小的空间中放置大图片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28534003/