Question

首先，非常感谢你对我所知道的一个简单问题的耐心，任何有超过几周经验的人都能想出来。我见过人们坚持不懈，在这里非常乐于助人，我希望你愿意和我一起做。

以下是我在这里搜索答案的地方之一：（Vertically center image thumbnails into fix-sized div）我在那里尝试了解决方案，这对我来说没有用。我也搜索了4或5个其他人，但也没有成功。

我想要做的是拍摄一张大图像（链接为#ysypic和#tabpic div的背景图像），并在我设置的div的范围内显示该图像的缩略图版本为了它。使用我在CSS中布局的背景属性，只有一部分图像显示在圆形div内。没有这些属性，显示默认为图像的更小部分[可能是左上角的pi *（50 ^ 2）区域]，分辨率很差。

我不关心整个图像是否显示在圆圈内部（由于形状不同，它不会显示），并且溢出未显示的情况很好。但是我希望能够看到每个图像中心的数字，而不仅仅是他们头部的一小部分。

如果这种使用背景图像的方法甚至不是最好的方法，请通知我。我希望能够在其他地方做到这一点，即拍摄大尺寸的图像并将其显示在比正常分辨率小得多的内部。

HTML：

<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
</head>
<body>
    <div class="container">
        <div class="piccontain">
            <div id="ysypic">
                <a href="www.thejourneytothebest.com/ysyprofile" class="guanyin" style="background-image:url('http://i.imgur.com/lbarYwr.jpg')"></a>
            </div>
        </div>
        <div class="piccontain">
            <div id="tabpic">
            </div>
        </div>
    </div>
</body>
</html>

CSS：

body {
    background-image:url('http://i.imgur.com/KLZAkVC.jpg');
    background-attachment:fixed;
    background-position:center;
    background-size:100% 100%;

}
.container {
    text-align:center;
}
.piccontain {
    width:150px;
    height:200px;
    background-color:white;
    border-radius:10%;
    display:inline-block;
}
#ysypic {
    width:100px;
    height:100px;
    border-radius:100%;
    margin-left:25px;
    background-image:url('http://i.imgur.com/lbarYwr.jpg');
    background-attachment:fixed;
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
}
#tabpic{
    width:100px;
    height:100px;
    border-radius:100%;
    margin-left:25px;
    background-image:url('http://i.imgur.com/yj4ROnn.jpg');
    background-attachment:fixed;
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
}

Answer 1

我尝试使用图片标记和溢出属性：

.test{
    width:100px;
    height:100px;
    border-radius:100%;
    margin-left:25px;
    overflow:hidden;
}
.test img{
     width:150px;
    height:200px;
    margin-top:-50px;
    margin-left:-30px;
}

http://jsfiddle.net/t5FkL/

这就是你要找的东西吗？

调整高分辨率图像（~8MB）以完全以小div显示（圆形，直径100px）

1 个答案: