Question

我的网站（amitnkalra.github.io）

有一个循环的内容

我的形象似乎很重要吗？如何使它变小并仍然显示它现在显示的图像的相同部分。

我有以下代码：

.profile {
border-radius: 150px;
        -webkit-border-radius: 150px;
        -moz-border-radius: 150px;
        background: url(img/Avatar.jpg) no-repeat;
width: 200px;
-moz-box-shadow: 0 0 1px #7992ce;
box-shadow: 0 0 1px #7992ce;
margin: auto;
height: 200px;
}

另外，我的社交媒体图标没有显示，它们是可点击的，但图标没有显示，为什么会这样？

以下是代码：

.Twitter {

width: 25px;
    height: 25px;
    background: url(img/Twitter.png);
    margin: auto;
display: inline-block;
}

Answer 1

你的div比你的背景图像小（25x25），所以你只看到它们的一小部分。为了适应它们，您可以使用：

    background-size: 100%;

将社交图像设置为背景的所有元素。

理想情况下，为了优化网站性能和安全带宽，您可以将这些图像缩小到25x25像素（除非您在其他地方使用大版本）。

Answer 2

body {
    text-align:center;
}

.profilePicture {
    border-radius: 150px;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    background-image: url(http://amitnkalra.github.io/img/anotherAvatar.jpg);
    background-size: cover;
    background-position: 45px top;
    width: 200px;
    height: 200px;
    -moz-box-shadow: 0 0 1px #7992ce;
    box-shadow: 0 0 1px #7992ce;
    margin: auto;
}

.Twitter {
    display: inline-block;
	width: 50px;
	height: 50px;
	margin: auto;
}

.Twitter img {
    height: 100%;
    width: 100%;
}

<div class="profilePicture"></div>

<a href="http://twitter.com/AMITNKALRA"><div class="Twitter"><img src="http://amitnkalra.github.io/img/Twitter.png" /></div></a>

身体css不是必需的。我添加它只是为了使.Twitter居中我使用background-size：cover来确保图像的宽度和高度都适合div，并使用background-position将图像向左移动一点。

如何在CSS或HTML中显示“适合”图像？

2 个答案: