Question

我有这个blogspot博客：sourcewing.blogspot.com

现在，如果您转到图纸标签，您会注意到电灯泡图像未对齐帖子的中心。我想说的是它的原始宽度和高度。如果宽度为1200px，则会超出 tbody （请检查此图片的HTML）。

我想要的是它应该自动缩小（保持比例），根据 div class =“post-body entry-content”... 元素的宽度（你会发现通过检查元素）。这应该适用于宽度超过此 div 的所有图片。

另外，我想知道为什么它不会自动缩小，而文本会自动对齐？

Answer 1

从height元素中删除固定的width和img属性。

然后，您可以添加一个类，例如.auto-contain或以下css的任何内容：

.auto-contain {
    display: block;
    height: auto;
    max-width: 100%;
    width: 100%;
}

这将强制图像始终与容器具有相同的宽度，但高度将按比例增长。

Answer 2

首先从img标记中删除width和height属性。

解决问题：

img {
    height: 90%;
    width: 90%;
}

如果您将高度和宽度设置为100％，通常您的图像将与父图像一样大。但在你的情况下，这不起作用。然而，90％看起来更好。

Answer 3

所以你错过了一些东西。

height: auto;
max-width: 100%;
box-sizing: border-box;

这将完全符合您的目标。

只是解释：

height: auto; - 这将确保您的照片保持成比例。

max-width: 100%; - 你的形象会表现得相反，但不会破坏它自然的尺寸。

box-sizing: border-box; - 因为你有填充物，你不想打破宽度，这将保持填充但不会破坏你的容器。