根据CSS中DIV的大小调整图像大小? [英] Resize an image based on the size of the DIV it is in with CSS?

问题描述

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

Below is an image of a blog I am working on. I need help with some CSS though. In the top image you can see what happens to my avatar when the text body to the right of it is larger then the image.

最下面的图像是我想要的样子.

The bottom image is how I want it to look.

我的问题是有多个作者，因此取决于作者，右边的正文可以有不同的长度.我想以某种方式调整图像的大小，使其始终适合div，并看起来像在底部图像中一样.

My problem is there are multiple authors, so the body text to the right can be of different lengths depending on the author. I would like to somehow have the image re-size itself to always fit into the div and look like it does in the bottom image.

希望这一切都有道理，如果有人知道该怎么做，我将不胜感激

Hopefully that all made sense, if anyone knows how to do this I would appreciate any help

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

I also put some example code up here to see it live http://dabblet.com/gist/2050005

推荐答案

将图像强制为特定大小，无论原始大小如何.

Force the image to a specific size, regardless of the size of the original.

css:

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

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

Size being whatever size you need/want to fill. In the html just add the class to the img element.

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

然后将该元素中放置的任何图像(无论是通过jquery，php还是其他方式)调整为适合您所需/想要的大小.

Then any image put into that element, whether by jquery, php or whatever, the element is sized to specifically what you need/want.

您还可以将图像放在其自己的容器中，例如"left-container"，并将左侧容器的宽度设置为具有自动高度的特定宽度，只需将< img> 标签放在左侧容器中，文本放在右侧容器"中

You can also put the image in it's own container, say "left-container" and have the width of the left container a specific width with an auto height, only put the <img> tag in the left container and the text in the "right-container"

希望这会有所帮助

这篇关于根据CSS中DIV的大小调整图像大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！