如何将图像放入Div类？ [英] How Do I Put An Image Into A Div Class?
本文介绍了如何将图像放入Div类？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
嘿伙计们，所以基本上这是我的HTML代码
Hey guys, so basically this is my html code
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>My Social Network</title>
</head>
<body>
<div class="friend"></div>
<div class="friend" id="best_friend"></div>
<div class="family"></div>
<div class="enemy"></div>
<div class="enemy" id="archnemesis"></div>
</body>
</html>
这是我的CSS代码
and this is my CSS code
div {
display: inline-block;
margin-left: 5px;
height:100px;
width:100px;
border-radius:100%;
border:2px solid black;
}
.friend{
border: 2px dashed #008000;
}
.family{
border: 2px dashed #0000ff;
}
.enemy{
border: 2px dashed #ff0000;
}
#best_friend{
border:4px solid #00C957;
}
#archnemesis{
border:4px solid #CC0000;
}
代码的结果是5个圆圈，每个圆圈周围有不同的边框。
我的问题是如何将图像放入圆圈中，图像被裁剪为已创建的圆圈/边框的尺寸？
The result of the code are 5 circles with different borders around them each.
My question is how would I go about putting images into the circles, with the images being cropped to the dimensions of the already created circles/borders?
推荐答案
将图像视为div的背景，并在CSS中设置各种背景属性，如下例所示：
Treat the image as background of the div and set the various background properties in CSS like this example:
div {
*/ your existing rules */
background-image: url("http://codeproject.cachefly.net/App_Themes/CodeProject/Img/logo250x135.gif");
background-repeat: no-repeat;
background-position:50% 50%;
background-size: contain;
}
这篇关于如何将图像放入Div类？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
