CSS：Div 小于对象答案

【问题标题】：CSS: Div is Smaller Than ObjectCSS：Div 小于对象
【发布时间】：2020-10-15 12:28:00
【问题描述】：

我已经尝试了所有我能想到的方法，例如：overflow、box-sizing、在 html 中弄乱 div、硬编码 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; 
}

【问题讨论】：

是否想让img占据整个div(.title-img)？
我注意到的第一件事是您缺少两个结束标签 (</div>)。也许这就是它的原因？
你使用transform: scale (.15, .15);的原因是什么？？如果只是为了缩小图像大小，为什么不使用宽度 - 高度？？
宽度和高度没有响应。变换了。 @Amaresh S M，是的，我正在尝试将 title-img div 设置为图像本身的大小，以便它再次响应命令。
@RichardYan 我缺少 div，因为这只是整个页面代码的一部分。

标签： html css browser png jpeg

【解决方案1】：

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

【讨论】：

是的，transform 是唯一会响应缩放图像的属性。在我这样做之前，图像太大导致页面溢出。这使得图像沿着 x 轴位于我想要的中心位置，但现在它周围有大量空白。
原来在inkscape中手动重新缩放图像然后消除css变换属性是要走的路。不知道变换没有调整对象足迹，只有对象本身。很高兴知道。可能是一件好事，我不经常使用这个属性...

【解决方案2】：

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

【讨论】：

我会试试的。原始图像是巨大的。就像，分页的海量。缩小是唯一可以使其适合文章类型格式的方法。

【解决方案3】：

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

【讨论】：

不幸的是，这对图像空间问题或 div 大小问题没有影响。可以放弃并尝试通过inkscape手动重新缩放。