CSS全高度动态插入img元素

Question

我正在使用一个允许我创建滑块的插件。我上传的图片作为<img>标签动态插入到首页布局中。虽然我知道如何使用CSS渲染完整高度的图像，但我无法使用html图像元素。

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

HTML

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

但我遇到的问题是图像在HTML内部时是这样的。我不能插入HTML代码，因为插件动态插入图像标签，插件插入的图像超过500个。

HTML

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

以上代码的结果是这样的。显然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>    

Answer 2

我正在重拍@Ali Sheikhpour的代码。将宽度：100％; 添加到 .slider img

.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;
  width: 100%;  
}

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