如何将图像完全放入div而不溢出到侧面?

问题描述 投票:0回答:1

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

编辑:我添加了html

photo spilling onto next 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>
html css image
1个回答
0
投票

您的问题的基本答案是,您需要通过将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>
© www.soinside.com 2019 - 2024. All rights reserved.