Question

我从数据库中获取了图像，并希望将此图像放在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和height，而是使用类似这样的css：

对于最大300px和可变高度的恒定宽度：

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

对于max 300px的常量高度和变量 width ：

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宽/高并且不失真且不大于容器。

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

4 个答案: