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

Question

所以我使用了一个名为 slick.js 的响应式轮播插件，但是如果我在 HTML 中指定图像的宽度和高度(随着页面变小，照片的宽度减少，但高度保持不变，所以它们看起来非常拉伸(stretch))。

我最初只是懒得在 HTML 中指定尺寸，但显然它没有验证，而且我知道无论如何这是不好的做法。

知道如何解决这个问题吗？

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

Answer 1

要避免那种可怕的外观或拉伸(stretch)，请执行此操作。

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

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

<!-- Your image goes here -->

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

2.为 #imager 创建一个具有定义宽度和高度的 CSS block 。

 #imager {
    wdth: 400px; /* Adjust as need */
    height: 350px; /* Adjust as need */
    overflow: hidden; /* hides any part of the image that grows 
    beyond the given dimension */
    }

3.为image本身创建一个CSS block ，将高度或宽度设置为auto。

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