如何在CSS或HTML中顯示'適合'圖像？

-2

我有一個圓形的東西爲我的網站（amitnkalra.github.io）如何在CSS或HTML中顯示'適合'圖像？

我的形象似乎是爲了這個？我如何使這個更小，並仍然顯示它現在顯示的圖像的相同部分。

我有以下代碼：

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

來源

2015-08-22 Amit Nivedan Kalra

我認爲你在帖子中提到的所有圖片都應該是''標籤，而不是背景圖片。它們是內容的一部分。而且，你的代碼中充滿了語法錯誤：你的開始標籤都需要'>'在屬性之後。 –

你是什麼意思「似乎太大了」？ – TylerH

縮小圖像太大而不適合。現在已經解決了。 –

你的div也一路小（25×25）比你的背景圖片，因此你只能看到他們的分數。爲了適合他們，您可以使用：

background-size: 100%;

關於社交圖像設置爲背景的所有元素。

理想情況下，爲了優化網站的性能和安全的一些帶寬，你會把這些圖像縮小到25x25像素（除非你在別處使用大版本）。

來源

2015-08-22 01:48:40 Shomz

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; 
 
\t width: 50px; 
 
\t height: 50px; 
 
\t 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將圖像向左移動一點。

來源

2015-08-22 02:06:18

如何在CSS或HTML中顯示'適合'圖像？

回答

相關問題