Html 如何为移动站点自动调整图像大小？_Html_Css_Image

Html 如何为移动站点自动调整图像大小？

html css image

Html 如何为移动站点自动调整图像大小？,html,css,image,Html,Css,Image,我尝试了谷歌搜索，但仍然无法找出如何根据不同移动设备的图像宽度调整图像大小。以下是我的尝试： CSS: HTML: 但图像仍在加载其原始缩放。我是一个css和html新手，所以任何帮助都将是伟大的编辑：谢谢你的回复。这是一个修订版，现在可以使用了 HTML: <html> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"&

我尝试了谷歌搜索，但仍然无法找出如何根据不同移动设备的图像宽度调整图像大小。以下是我的尝试：

CSS:

HTML:

但图像仍在加载其原始缩放。我是一个css和html新手，所以任何帮助都将是伟大的

编辑：

谢谢你的回复。这是一个修订版，现在可以使用了

HTML:

   <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
        <meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0;  user-scalable=0;" name="viewport">
        <link rel="stylesheet" href="../includes/style.css">
    </head>
    <body width = "device-width">
        <img class="test"  src="../includes/buoy_map.jpg">
    </body>

应将图像设置为占据其包含元素的100%。

您的css没有任何效果，因为外部元素没有定义宽度（并且缺少主体）

另一种方法是交付已缩放的图像。例如，根据查看设备提供已经缩小的图像。

对于我来说，最好在图像css中添加此内容：

最大宽度：100%并在html参数中不指定图像宽度和高度。这将调整宽度以适应设备屏幕，同时自动调整高度。否则，高度可能会失真。
如果使用引导3，只需在img标签中添加img responsive类即可
img
{
    max-width: 100%;
    min-width: 300px;
    height: auto;
}

<img class="img-responsive"  src="...">

<img class="img-fluid"  src="...">



如果您使用引导程序4，请在您的img标签中添加img fluid类
<img class="img-responsive"  src="...">

<img class="img-fluid"  src="...">



工作人员：
最大宽度：100%，高度：自动，图像的显示：块
您可以使用以下css调整移动视图的图像大小
object-fit: scale-down; max-width: 100%

您是否为图像的任何父元素指定了宽度？您的img
标记应位于主体内。您实际上没有body标记，因此添加一个：-）这在某些情况下很有用，但它会忽略图像的纵横比，可能会使图像倾斜；我不知道为什么有人否决了这个答案。这对我很有效。在移动浏览器中，图像压缩效果很好。高度：自动；他为我做了这件事。现在，我的图像正在根据移动设备的分辨率调整大小。谢谢这对我来说很有用，但我现在使用的是Bootstrap4，所以它是内置的。对于OP来说，情况可能并非如此。这对我来说很有效，但我需要在页面上豁免一个徽标。某个特定的图像可以被豁免吗？现在可以了。我将最小宽度减少到100px。非常感谢您向我展示对象拟合属性。这正是我所寻找的，甚至让我发现了objectposition。
object-fit: scale-down; max-width: 100%