Question

我需要圆角底部内圆角底的图像。

我尝试设置图像边框半径，但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>

Answer 1

将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>

Answer 2

因为img是一个内联元素，并且像所有内联元素一样，它们需要关注descenders，这些字母位于基础之下，就像img一样。

许多人的一个解决方案是在容纳.mainTile { position: absolute; background-color: red; border-radius: 15px; font-size: 0; /* Added */ } .mainTileHeader { width: 90%; margin-left: auto; margin-right: auto; font-size: 16px; /* Added */ } .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; }的容器上设置font-size 0，这将使文本在子项中消失，所以你只需将它设置回那些孩子。

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

{{1}}

如何在div内圆角图像

2 个答案: