如何在高度和宽度上将固定滑块更改为响应滑块

Question

我正在使用wordpress Colr主题，我有一个简单的页面，里面有一个滑块。这里的目标是在调整页面大小时具有响应式滑块。 我试图玩img balise，但是无法解决我的问题

滑块的HTML部分：

<div class="images">
    <div class="wp-caption" style="width: auto; display: block;">
        <img src="http://.../wp-content/uploads/2019/02/1.jpg" alt="" class="wp-image-24" style="height: 564px;">
    </div>
<div class="images">
    <div class="wp-caption" style="width: auto; display: block;">
        <img src="http://.../wp-content/uploads/2019/02/2.jpg" alt="" class="wp-image-24" style="height: 564px;">
    </div>    

<div class="images">
    <div class="wp-caption" style="width: auto; display: block;">
        <img src="http://.../wp-content/uploads/2019/02/3.jpg" alt="" class="wp-image-24" style="height: 564px;">
    </div>

此主题的响应速度不太快，我的意思是，当我调整页面大小时，幻灯片会保持相同的高度和宽度，而我的响应速度却无法。在类中可能需要CSS部分吗？

使用jwmoreland代码：

img {
  max-width: 100%;
  height: auto !important;
}

我们有这个结果 代替这个

Answer 1

为图像添加最大宽度会有所帮助。我认为javascript虽然添加了一个height属性，但它的长宽比混乱了。我必须用！imporant语句覆盖它。

img {
   width: 600px;
   max-width: 100%;
   height: auto !important;
}

更新-看来我上面的解决方案可能会使图像扩展得比宽屏大。要限制它，请添加一个宽度，然后它将一直保持该宽度，直到它碰到其边界框的边缘（随屏幕调整大小）为止。

Answer 2

使用img平衡是解决方案，这里的目标是默认删除img属性，如下所示：

 img {
  width: auto!important;
  height: auto!important;
  max-height: 70%!important;
  max-width: 70%!important;
  position: absolute!important;
  top: 0!important;
  bottom: 0!important;
  left: 0!important;
  right: 0!important;
  margin: auto!important;
}