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

debugcn 发表于 Dev

令人讨厌的鸟

我正在开发一个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;
    }

输出：

在下面，您将找到完整的代码和代码段的链接：

 /**
 * 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>

我需要一些帮助来调整小于200px的BEFORE图片的尺寸。

很抱歉，一个很长的问题。谢谢您的时间:)

我用几个附加内容和媒体查询更新了我的代码

<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 -->

巴肯

我发现的唯一解决方案是添加悬停滚动条，以更改div的宽度。

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。