时间戳

首页 > 解决方案 > 如何在div内圆角图像

javascript - 如何在div内圆角图像

问题描述

我需要在圆形 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>

标签： javascripthtmlcss

解决方案

添加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>

推荐阅读