Jquery 在HTML中指定图像的宽度和高度

因此，我使用了一个名为slick.js的响应式旋转木马插件，但是如果我在HTML中指定图像的宽度和高度，响应性方面就不起作用了（当页面变小时，照片的宽度减小，但高度保持不变，所以它们看起来被严重拉伸）

起初我只是没有在HTML中指定维度，但显然它不会验证，而且我知道这是一种糟糕的做法

你知道怎么避开这个吗

---

如果需要，将提供代码，但我觉得这可能只是一个问题，我可以在没有代码的情况下得到答案。

为了避免那种可怕的外观或拉伸，请这样做

1.将图像包装在容器中。见下文

<div id="imager"><!-- Begin -->

<!-- Your image goes here -->

</div><!-- End Imager -->

3.为图像本身创建一个CSS块，并将高度或宽度设置为“自动”

 #imager img {
        wdth: 100%; /* Must match the width of #imager */**
        height: auto;/* Auto allows the image 
        the space to adjust without deteriorating */
        }

---

您可以通过在页面的头部或在外部样式表中定义“IMG”的值来取消SLIK.JS。您可能需要考虑哪个规则（SLIK.JS或CSS）是最后一个被渲染的。p> 直接在img元素上指定尺寸是一种不错的做法，并且会进行验证-但是您只能使用“无单位值”fx“宽度：600”指定比例-HTML中“img”的比例以及百分比、像素或任何其他值都不起作用。然而，“无单位值”仍然是指以像素为单位测量的图像比例

这是因为元素“img”属于称为“替换元素”的元素组，该元素具有预定义的样式-在“img”的情况下，原始图像的比例将保留，直到CSS中定义了其他具有“真实”值的元素：

使用CSS2，您可以通过向元素添加一个类来轻松缩放图像：

.img_width {
    width: 100%; 
    height: auto; 
}

CSS3缺乏IE8和之前版本的支持，您有2个机会可以直接应用于该元素：

.img_width {
    width: 100%; 
    height: auto; 
}

使用背景尺寸“封面”：

img  {
    background: url(image.jpg);
    background-repeat: no-repeat;
    background-position: center; 
    background-size: cover; 
]

使用背景大小“包含”：

img  {
    background: url(image.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; 
}

---

将一个设置为a%，另一个设置为自动？啊，对了，我认为HMTL尺寸必须以像素为单位。谢谢大家!<代码>我最初只是没有在HTML中指定维度，但显然它不会验证，而且我知道这是一种糟糕的做法。我总是使用css来指定宽度和高度，而不是img标记上的属性。尤其是html5，因为在属性中使用百分比是无效的：（期望宽度或高度以css像素为单位）。当你的代码没有被验证时是什么样子的？啊，对了，我以为它必须是像素！基本上，它说我必须在HTML中指定原始图像维度。我通常会这样做，但我会指定我在CSS中实际使用的维度（无论是像素、百分比还是其他）。这里的问题是，slick.js根据视口宽度决定图像的宽度，但没有为高度指定任何内容。这意味着它必须离开的唯一高度是我在HTML中指定的高度。我可能错了，但我很确定这就是正在发生的事情。这个问题并没有描述你真正想要实现的目标。作为一个关于在HTML中设置维度的技术问题，它很简单：当然你可以这样做（验证器是否不批准这是另一个问题，你甚至没有指定他们不批准什么），你也可以使用CSS设置。这非常有效，谢谢！我将#imager设置为视口宽时原始照片的宽度，然后为小于400px的宽度添加了一个断点，其中#imager宽度为350px，因此它不会在较小的屏幕上剪切太多图片。