基于它在CSS中的DIV大小来调整图像大小？

下面是我正在处理的博客的图像。尽管我需要一些CSS的帮助。在顶部图像中，当右侧的文本主体大于图像时，可以看到我的头像发生了什么。基于它在CSS中的DIV大小来调整图像大小？

底部图像是我希望它看起来如何。

我的问题是有多个作者，所以根据作者的不同，右侧的正文文本可以有不同的长度。我想以某种方式将图像重新调整大小，使其始终适合div，并且看起来像是在底部图像中显示的。

希望这一切是有道理的，如果有人知道如何做到这一点，我希望得到任何帮助

我也把一些示例代码在这里看到它住http://dabblet.com/gist/2050005

enter image description here

来源

2012-03-17 JasonDavis

强制图像到特定的大小，而不管原始大小。

CSS：

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

尺寸是不论大小，你需要/想填补。在html中，只需将该类添加到img元素。

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

那么任何图像放入该元素，无论是通过jQuery的，PHP或什么的，该元件的尺寸以具体你需要/想什么。

您也可以将图像放在它自己的容器中，比如说“left-container”，左边的容器的宽度为具有自动高度的特定宽度，只将<img>标签放在左边的容器中， “合适的容器”

希望这有助于

来源

2012-03-17 01:07:20

感谢您的帮助，我的问题现在的问题是，如果我将它设置为200像素，我不知道多久了生物信息将会是，所以如果时间更长，它可能会更大，或者可能会更小。也许如果我设置'max-width'和'max-height'会解决这个问题 – JasonDavis 2012-03-17 01:10:40

然后尝试左/右容器的想法。创建一个父'div'，然后'div'作为左容器，其中将包含'img'和容器，它将容纳文本。即使文字的大小大于图像的大小，它也会始终保留在容器中。只要确保将左侧容器浮动到左侧然后在下一个div中在容器div外面确保清除浮动 – 2012-03-17 01:20:21

考虑一下，为了“动态”更改图像的大小，您可以执行宽度：100％，高度：100％，但问题是，如果图像元素的宽度或它包含div，阻止其增长（因为文本在右侧），图像的高度将保持宽度限制。您应该专注于容器而不是调整图像大小。拉伸图片时，您会失去图像质量 – 2012-03-17 01:41:50

为什么你就不能这样做：

<!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的宽度时，它会被像素化。

来源

2012-03-17 01:40:39 Tim

这会为你工作..设置

使用CSS

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

来源

2013-02-03 05:24:57 Swarup

我使用这个：

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

来源

2017-09-03 13:51:52 Flavio

基于它在CSS中的DIV大小来调整图像大小？

回答

相关问题