从数据库中获取图像并将其放入html标签中

Question

我从数据库中提取图像，并希望将此图像放入div标签中或放入div标签中，而不会拉伸图像。所有图像都是不同的大小，所以我不能使用width和height图像属性，因为当我使用它时，图像正在拉伸。

<div style="width:300px; height:300px;"> 
    <img src="link.jpg" alt="jet"> 
</div> 

Answer 1

使用此CSS

img { 
    max-width:100% 
} 

EXAMPLES

你有两个选择，如果你不能得到你想要在适当大小的图像，记住大小调整浏览器导致的图像到性能问题。

Answer 2

试试这个：设置max-width图像和width自动。

HTML：

<div> 
    <img src="link.jpg" alt="jet"> 
</div> 

CSS：

img 
{ 
    width:auto; 
    max-width:300px; 
} 

这里是一个DEMO。

它应该工作！ 感谢

Answer 3

试试这个：

img 
{ 
    width: 100%; 
    max-width: 300px; 
} 

Answer 4

不要指定图像标签widht和高度，但使用的CSS是这样的：

为最大300像素的一定宽度可变高度：

img { 
    width: 300px; 
    max-width: 100%; 
    height: auto; /* needed for some browsers to keep the proportions */ 
} 

对于常量高度最大300像素的和可变宽度：

img { 
    height: 300px; 
    max-height: 100%; 
    width: auto; /* needed for some browsers to keep the proportions */ 
} 

如果希望图像以适合容器（不大于容器较大的宽度或高度）和按比例缩放时，可以使用：

img { 
    height: auto; 
    width: auto; 
    max-height: 100%; 
    max-width: 100%; 
    margin: auto; /* optional, to center horizontally/vertically */ 
} 

这将使图像最大300px宽/高，不失真和不大于容器。