css - 根据 CSS 所在的 DIV 的大小调整图像大小？

Question

下面是我正在处理的博客的图片。不过，我需要一些 CSS 方面的帮助。在顶部图片中，您可以看到当右侧的文本正文比图片大时我的头像会发生什么情况。

底部图片是我想要的样子。

我的问题是有多位作者，因此右侧的正文可能会因作者而异。我想以某种方式让图像自行调整大小以始终适合 div 并看起来像在底部图像中一样。

希望一切都有意义，如果有人知道如何做到这一点，我将不胜感激

我还在此处放了一些示例代码以实时查看 http://dabblet.com/gist/2050005

Answer 1

无论原始尺寸如何，强制图像为特定尺寸。

CSS:

.size-image img {
width: 200px;
height: 200px;
}

大小是您需要/想要填充的任何大小。在 html 中只需将类添加到 img元素。

<img src="path/to/image" class="size-image" />

然后将任何图像放入该元素，无论是通过 jquery、php 还是其他方式，该元素的大小都会根据您的需要/想要的具体大小而定。

你也可以把图片放在它自己的容器里，比如“left-container”，让左边容器的宽度为特定宽度和自动高度，只放 <img>左侧容器中的标记和“右侧容器”中的文本

希望对你有帮助