Question

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

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

我的问题是有多位作者，因此右侧的正文可能会有不同的长度，具体取决于作者。我想以某种方式让图像重新调整大小以始终适合div并且看起来像在底部图像中。

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

我还在这里放了一些示例代码，以便查看它http://dabblet.com/gist/2050005

enter image description here

Answer 1

无论原稿大小如何，都要将图像强制为特定尺寸。

的CSS：

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

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

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

然后放入该元素的任何图像，无论是通过jquery，php还是其他任何东西，该元素的大小都是根据您的需要/想要的大小。

你也可以把图像放在它自己的容器中，比如说“左容器”，左边容器的宽度是一个特定的宽度和一个自动高度，只将<img>标签放在左边的容器中， “右容器”中的文字

希望这有帮助

Answer 2

这对你有用..

使用css进行设置

img { 最大宽度：100％; 最大高度：100％ }

Answer 3

为什么你不能这样做：

<!doctype html>
<html>
    <head>
        <style type="text/css">
            #img-div { width: 250px; }
            #img-div img { width: 100%; }
            #text-div {  }
        </style>
    </head>
    <body>
        <div id="img-div">
            <img src="example.jpg" />
        </div>
        <div id="text-div">
            Lorem ipsum dolor blah blah blah
        </div>
    </body>
</html>

这对我有用。唯一的问题是当实际图像小于包含div的宽度时，它会变得像素化。

Answer 4

我正在使用它：

.product p.image {
text-align: center;
width: 220px;
height: 160px;
overflow: hidden;
}
.product p.image img{
max-width: 100%;
max-height: 100%;
}

根据CSS中的DIV大小调整图像大小？

4 个答案: