如何在div内圆角图像
pet*_*van 0 html javascript css
我需要圆形div内圆角底的图像.
我试图设置图像边框半径,但div超过图像.我在哪里弄错了？
有办法解决它吗？或者我们有更好的解决方案？谢谢你的所有答案
这是我的代码
.mainTile{
position: absolute;
background-color: red;
border-radius: 15px;
}
.mainTileHeader
{
width: 90%;
margin-left: auto;
margin-right: auto;
}
.mainTileHeader h2
{
text-align: center;
margin-top: 10px;
color: white;
margin-bottom: 10px;
}
.mainTileImg
{
width: 100%;
-webkit-border-radius: 0 0 15px 15px;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
border-radius: 20px;
position: absolute;
right: 10px;
bottom: 10px;
}<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="widht=device-width">
<title>Main</title>
</head>
<body>
<div class="mainTile" style="width: 300px;">
<div class="mainTileHeader">
<h2>Header</h2>
</div>
<img src="https://picsum.photos/300/?random" alt="item" class="mainTileImg">
<button class="button">xxxxx</button>
</div>
</body>
</html>添加vertical-align:top;到您的图像课程.默认的垂直对齐是基线,这是造成差距的原因.
.mainTile {
position: absolute;
background-color: red;
border-radius: 15px;
}
.mainTileHeader {
width: 90%;
margin-left: auto;
margin-right: auto;
}
.mainTileHeader h2 {
text-align: center;
margin-top: 10px;
color: white;
margin-bottom: 10px;
}
.mainTileImg {
width: 100%;
-webkit-border-radius: 0 0 15px 15px;
vertical-align:top;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
border-radius: 20px;
position: absolute;
right: 10px;
bottom: 10px;
}<div class="mainTile" style="width: 300px;">
<div class="mainTileHeader">
<h2>Header</h2>
</div>
<img src="https://picsum.photos/300/?random" alt="item" class="mainTileImg">
<button class="button">xxxxx</button>
</div>| 归档时间： |
|
| 查看次数： |
44 次 |
| 最近记录： |