如何将图像正确放置在父级 div 中
How to place image inside of a parent div properly
我有一个 div 这样的:
<div class="p-5 mb-3 mainInfo">
<div class="circle"><img src="https://nanoclub.ir/images/cut.png"></div>
</div>
结果是这样的:
但是,它应该像这样显示在 div 中:
这里是 CSS:
.mainInfo{
background-color: #fff;
border: .01rem round #e0e1ed;
border-radius: 20px;
color: #585CA1;
height:50px;
}
.circle {
position:absolute;
width:150px;
height:170px;
border-radius:50%;
background:#fff;
right:100px;
top:40%;
transform:translateY(-50%);
}
那么我怎样才能把图像放在 circle
div 中,就像预期的图像一样?
我通过 absolute
定位和 ::before
选择器实现了这一点。我还为图像添加了最大宽度的边框半径。
HTML:
<div class="mainInfo">
<div class="circle">
<img src="https://picsum.photos/200" />
</div>
</div>
CSS:
.mainInfo{
background-color: #fff;
border: .01rem round #e0e1ed;
border-radius: 20px;
color: #585CA1;
width:100%;
height:5em;
box-shadow: 0px 0px 17px -5px rgba(0,0,0,0.75);
margin-top: 3em;
display: flex;
align-items: center;
justify-content: center;
}
.circle {
position: relative;
width: 8em;
height: 8em;
background: #fff;
border-radius: 50%;
box-shadow: 0px 0px 17px -5px rgba(0,0,0,0.65);
}
.circle:before{
position: absolute;
content: "";
width: 15em;
height: 5em;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
}
.circle img {
position: absolute;
max-width: 85%;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 200;
}
我有一个 div 这样的:
<div class="p-5 mb-3 mainInfo">
<div class="circle"><img src="https://nanoclub.ir/images/cut.png"></div>
</div>
结果是这样的:
但是,它应该像这样显示在 div 中:
这里是 CSS:
.mainInfo{
background-color: #fff;
border: .01rem round #e0e1ed;
border-radius: 20px;
color: #585CA1;
height:50px;
}
.circle {
position:absolute;
width:150px;
height:170px;
border-radius:50%;
background:#fff;
right:100px;
top:40%;
transform:translateY(-50%);
}
那么我怎样才能把图像放在 circle
div 中,就像预期的图像一样?
我通过 absolute
定位和 ::before
选择器实现了这一点。我还为图像添加了最大宽度的边框半径。
HTML:
<div class="mainInfo">
<div class="circle">
<img src="https://picsum.photos/200" />
</div>
</div>
CSS:
.mainInfo{
background-color: #fff;
border: .01rem round #e0e1ed;
border-radius: 20px;
color: #585CA1;
width:100%;
height:5em;
box-shadow: 0px 0px 17px -5px rgba(0,0,0,0.75);
margin-top: 3em;
display: flex;
align-items: center;
justify-content: center;
}
.circle {
position: relative;
width: 8em;
height: 8em;
background: #fff;
border-radius: 50%;
box-shadow: 0px 0px 17px -5px rgba(0,0,0,0.65);
}
.circle:before{
position: absolute;
content: "";
width: 15em;
height: 5em;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
}
.circle img {
position: absolute;
max-width: 85%;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 200;
}