html - 动态插入的img元素的CSS全高

Question

我正在使用一个允许我创建 slider 的插件。我上传的图片动态插入为 <img>标记到首页布局中。虽然我知道如何使用 CSS 渲染全高图像，但我无法让它与 html 图像元素一起使用。

如果图像由 CSS 提供并且结果完美，则此代码非常有效。

HTML

.container{
   width: 750px;
   height: 600px;
   background: rgba(222,211,210,1);
   border: solid 4px #8c8c8c;
}

.slider{
   background-image: url('https://i.imgur.com/Ye4Uugc.jpg');
   width: 100%;
   height: 100%;
   background-size: auto 100%;
   background-position: center;
   background-repeat: no-repeat;
}

<div class="container">
   <div class="slider">
   </div>
</div>

但我遇到的问题是当图像像这样位于 HTML 中时。我无法干预 HTML 代码，因为插件会动态插入图像标签，而且我有 500 多张由插件插入的图像。

HTML

.container{
   width: 750px;
   height: 600px;
   background: rgba(222,211,210,1);
   border: solid 4px #8c8c8c;
}

.slider{
   width: 100%;
   height: 100%;
   background-size: auto 100%;
   background-position: center;
   background-repeat: no-repeat;
}

<div class="container">
   <div class="slider">
      <img src="https://i.imgur.com/Ye4Uugc.jpg">
   </div>
</div>

上面代码的结果是这样的。显然overflow: hidden;剪下超过容器高度的下部，这不是我想要的解决方案，因为我需要图像适合容器内部并保持其原始比例。

感谢任何帮助。

Answer 1

也为图像添加规则以防止溢出:

.container{
  width: 750px;
  height: 600px;
  background: rgba(222,211,210,1);
  border: solid 4px #8c8c8c;
}

.slider{
  width: 100%;
  height: 100%;
  background-size: auto 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.slider img{
  max-width:100%;
  max-height:100%;
  height:auto;
}

<div class="container">
   <div class="slider">
      <img src="https://i.imgur.com/Ye4Uugc.jpg">
   </div>
</div>