使用 CSS 之前和之后的滑块...无法调整小于初始宽度的图像

Question

我正在开发一个 WP 网站，它是从 HTML 代码迁移过来的。所以，我很难使用 WP 中的插件。

我搜索并找到了一种方法，只需使用 CSS 即可获得之前和之后的功能。它有效，我很高兴。

这是我找到它的地方：

http://lea.verou.me/2014/07/image-comparison-slider-with-pure-css/

输出：

现在我想稍微调整一下...

好的..所以现在.. 如果我将 ( .image-slider > div ) 宽度更改为 200px.

.image-slider > div {
      position: absolute;
      top: 0; bottom: 0; left: 0;
      width: 200px;
      max-width: 100%;
      overflow: hidden;
      resize: horizontal;
    }

输出：

下面是完整的代码和 link 片段：

 /**
 * Image slider with pure CSS
 * Original version in http://demosthenes.info/blog/css
 */

.image-slider {
  position:relative;
  display: inline-block;
  line-height: 0;
}

/* Could use a pseudo-element, but they’re currently
   super buggy. See: http://dabblet.com/gist/ab432c3f6a8f672cd077 */
.image-slider > div {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 200px;
  max-width: 100%;
  overflow: hidden;
  resize: horizontal;
}

/* Cross-browser resizer styling */
.image-slider > div:before {
  content: '';
  position: absolute;
  right: 0; bottom: 0;
  width: 40px; height: 40px;
  padding: 5px;
  background: linear-gradient(-45deg, white 40%, transparent 0);
  background-clip: content-box;
  cursor: ew-resize;
  -webkit-filter: drop-shadow(0 0 2px black);
  filter: drop-shadow(0 0 2px black);
}

.image-slider img {
  user-select: none;
  max-width: 400px;
}

<div class="image-slider">
      
  <div>
      
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/photoshop-face-before.jpg" />
      
  </div>
      
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/photoshop-face-after.jpg" />
     
</div>

我需要一些帮助来将之前的图片调整为小于 200 像素。

很抱歉问了一个很长的问题。谢谢你的时间:)

我更新了我的代码，增加了一些内容和媒体查询

<script type='text/javascript'>
              
  function mouseOver1() 
              
{              
    document.getElementById('pic1').style.width="700px";
               
  }
              
          
</script>

          
<script type='text/javascript'>
              
  function mouseOverReset1() {
              
  document.getElementById('pic1').style.width="15px";
              }       
          
</script>

/**

* Title: Custom Style For Smile Gallery
* Author: Nick D' Curz
* Company: Nick Software Solutions
* URL:http://nicksoftwaresolutions.com;

*/



 
 @media screen and (min-width: 200px) 
    {

 /**
 * Image slider with pure CSS
 * Original version in http://demosthenes.info/blog/css
 */

.image-slider {
  position:relative;
  display: inline-block;
  line-height: 0;
}

/* Could use a pseudo-element, but they’re currently
   super buggy. See: http://dabblet.com/gist/ab432c3f6a8f672cd077 */
.image-slider > div {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width:150px;
  max-width: 100%;
  overflow: hidden;
  resize: horizontal;
  -webkit-transition: width 1s; /* Safari */
    -webkit-transition-timing-function: linear; /* Safari */
    transition: width 1s;
    transition-timing-function: linear;
}

/* Cross-browser resizer styling */
.image-slider > div:before {
  content: '';
  position: absolute;
  right: 0; bottom: 0;
  width: 40px; height: 40px;
  padding: 5px;
  background: linear-gradient(-45deg, white 40%, transparent 0);
  background-clip: content-box;
  cursor: ew-resize;
  -webkit-filter: drop-shadow(0 0 2px black);
  filter: drop-shadow(0 0 2px black);
}

.image-slider img {
  user-select: none;
  max-width: 300px;
}

/*.image-slider > div:hover{
  width:25px;
}*/

}

@media screen and (min-width: 768px) 
    {

 /**
 * Image slider with pure CSS
 * Original version in http://demosthenes.info/blog/css
 */

.image-slider {
  position:relative;
  display: inline-block;
  line-height: 0;
}

/* Could use a pseudo-element, but they’re currently
   super buggy. See: http://dabblet.com/gist/ab432c3f6a8f672cd077 */
.image-slider > div {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width:350px;
  max-width: 100%;
  overflow: hidden;
  resize: horizontal;
  -webkit-transition: width 1s; /* Safari */
    -webkit-transition-timing-function: linear; /* Safari */
    transition: width 1s;
    transition-timing-function: linear;
}

/* Cross-browser resizer styling */
.image-slider > div:before {
  content: '';
  position: absolute;
  right: 0; bottom: 0;
  width: 40px; height: 40px;
  padding: 5px;
  background: linear-gradient(-45deg, white 40%, transparent 0);
  background-clip: content-box;
  cursor: ew-resize;
  -webkit-filter: drop-shadow(0 0 2px black);
  filter: drop-shadow(0 0 2px black);
}

.image-slider img {
  user-select: none;
  max-width: 700px;
}

/*.image-slider > div:hover{
  width:25px;
}*/

}

<link href="http://www.example.com/wp-content/themes/blankslate/css/bootstrap.css" rel="stylesheet"/>
<!-- SMILE GALLERY SLIDER PICTURES STARTS HERE -->

       <!-- PICTURE 1 STARTS HERE -->

        <div style="text-align: center;">
      
         <div>

          <div class="image-slider">
           <div id="pic1">
           <img src="http://www.example.com/wp-content/uploads/2016/03/o1-b.jpg" />
           </div>
           <img src="http://www.example.com/wp-content/uploads/2016/03/o1-a.jpg" />
          </div>
       
          <span >
<a data-toggle="tooltip" title="Click" class="btn btn-warning pull-left" onclick="mouseOver1()" style="width:70px">Before</a></span> 
          <span >
<a data-toggle="tooltip" title="Click" class="btn btn-success pull-right" onclick="mouseOverReset1()" style="width:70px">After</a></span>
         </div>
          <br><br>
       
          
       </div>

       <!-- PICTURE 1 ENDS HERE -->

Answer 1

我找到的唯一解决方案是添加悬停选择器，它会改变 div 的宽度。

.image-slider > div:hover{ width:10px; }

使用 CSS 之前和之后的滑块...无法调整小于初始宽度的图像

Before and After Slider using CSS... Unable to Re-size image lesser than the Initial Width

html

css

image-processing

before-filter

image-resizing