CSS: Div 小于对象

Question

我已经尝试了所有我能想到的方法，例如：溢出、box-sizing、messing with divs 在 html、 硬编码 div 宽度 等中。但没有任何效果，我没有看到任何需要重写才能使其中任何一个起作用的继承特征。

这导致了一个问题，我的图像周围有大量空白，我不知道如何让它停止（因为我的代码已经在其他页面上运行）。

我试过从 .png 切换到 .jpg 并返回，但没有用。

感谢任何帮助。

（Border-radius 也因此不起作用，这是我的第一个提示，这是一个 div 尺寸问题。）

我的HTML:

<div class="content-wrapper">
    <div class="content-header-wrapper">
        <h2>Page Title.</h2>
    </div>

    <div class="title-img"><img src="../Images/headshot.jpg"></div>

    <div class="content-message-wrapper">
        <div class="p1-titlewrap">
            <h3>1st Paragraph Header</h3>
        </div>
    </div>
</div>

我的CSS:

 .content-wrapper {
    justify-items:center;
    background-color: white;
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-size: 100%;
    font-family: "Ubuntu Condensed", sans-serif;
    height:auto;
}

.content-wrapper .content-header-wrapper {
    font-size: 1.5em;
    display: flex;
    justify-content: center;
}

.content-wrapper .title-img {
    display: flex;
    justify-content: center;
    transform: scale(.15,.15);
    box-sizing: content-box; 
}

Answer 1

您是否尝试过在 CSS 中调整 transform: scale() 属性？或者这不是你一开始就想做的事情？

Answer 2

也许设置“背景尺寸：封面；”应该用图像填充整个 div。如果不是，为什么不尝试调整图像大小，使其填满更多 space.

Answer 3

尝试将图像设置为css属性background并设置background-size:cover;。希望能帮到您解决这个问题。

CSS: Div 小于对象

CSS: Div is Smaller Than Object

html

css

browser

png

jpeg