时间戳

首页 > 解决方案 > 如何将图像完全放入 div 而不会溢出？

html - 如何将图像完全放入 div 而不会溢出？

问题描述

我正在尝试在屏幕的一部分上制作一张水平卡片，到目前为止，一切看起来都与我想要的完全一样，除了图像仅部分显示在卡片边框中，大约一半，并且覆盖了下一张卡片。我试图让它均匀地坐在卡内。我附上了一张我的意思的照片，这是我正在使用的代码。如果您需要查看 html，请告诉我。

编辑：我添加了html

照片溢出到下一个 div

.cardcontainer {
    border: white solid 1px;
    padding-left: 30px;
    padding-bottom: 30px;
    margin: 20px;
    background-color: rgb(7, 16, 31);
}

.cardheading {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: white;
    position: relative;
}

.cardpara {
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(117, 117, 117);
    position: relative;
    padding-bottom: 25px;
    padding-right: 25px;
    font-style: italic;
    width: auto;
}

.cardimg {
    width: 130px;
    height: 130px;
    float: right;
    padding:0;
    margin-right: 30px;
}

.learnmorebutton {
    border: none;
    color: white;
    padding: 10px 15px;
    text-align: center;
    font-size: 16px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    cursor: pointer;
    margin: 0 auto;
    border-radius: 15px;
    animation: fade 10s linear infinite alternate;
    text-decoration: none;
}

html:

<div class="cardcontainer">
                    <h1 class="cardheading">placeholder<i class="location">placeholder</i></h1>
                    <p class="cardpara">placeholder</p>
                    <a class="learnmorebutton" href="#" target="_blank">Learn More</a>
                    <img class="cardimg" src="#">
                </div>

标签： htmlcssimage

解决方案

您的问题的基本答案是，您需要通过将overflow属性添加到父级来清除图像上的浮动。但是，其中的内容.cardpara会将图像向下推。不确定这是否是您想要的。

如果您希望内容旁边的图像<p>和文本环绕它，然后在标记中移动您的<img>标签。 <p>

.cardcontainer {
    border: white solid 1px;
    padding-left: 30px;
    padding-bottom: 30px;
    margin: 20px;
    background-color: rgb(7, 16, 31);
    overflow: auto;
}

.cardheading {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: white;
    position: relative;
}

.cardpara {
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(117, 117, 117);
    position: relative;
    padding-bottom: 25px;
    padding-right: 25px;
    font-style: italic;
    width: auto;
}

.cardimg {
    width: 130px;
    height: 130px;
    float: right;
    padding:0;
    margin-right: 30px;
}

.learnmorebutton {
    border: none;
    color: white;
    padding: 10px 15px;
    text-align: center;
    font-size: 16px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    cursor: pointer;
    margin: 0 auto;
    border-radius: 15px;
    animation: fade 10s linear infinite alternate;
    text-decoration: none;
}
<div class="cardcontainer">
  <h1 class="cardheading">placeholder<i class="location">placeholder</i></h1>
  <p class="cardpara">placeholder</p>
  <a class="learnmorebutton" href="#" target="_blank">Learn More</a>
  <img class="cardimg" src="https://via.placeholder.com/130?text=PLACEHOLDER">
</div>

推荐阅读