响应式图像悬停缩放

Question

我正在尝试构建响应式图像悬停。我已经使宽度响应没有问题，但是高度引起了问题。我试过了：

1. 设置最小/最大高度像素明智设置高度为自动（此 导致我的图像消失）
2. 使用百分比表示高度（100% - 这会导致我的图像消失）
3. 使用媒体查询（仅在断点处更改）

我主要基于 Responsive Image Hover - CSS/JQuery 的帖子来创建这个 CSS，但我无法理解为高度提供的解决方案，或者我执行不正确。

.viewport_css {
  position: relative;
  max-width: 599px;
  height: auto;
  overflow: hidden;
}
.viewport_css .dummy {
  width: 100%;
  height: auto;
  display: block;
}
.viewport_css a,
.viewport_css a:hover:before,
.viewport_css a:hover:after {
  position: absolute;
  left: 0;
  right: 0;
}
.viewport_css a,
.viewport_css a:hover:after {
  top: 0;
  bottom: 0;
}
.viewport_css a:hover:after {
  content: '';
  display: block;
  z-index: 100;
  background-color: rgba(255, 255, 255, .25);
}
.viewport_css a:hover:before {
  content: 'View';
  color: #fff;
  top: 50%;
  text-align: center;
  z-index: 200;
  margin-top: -0.5em;
}
.viewport_css .imgwrapper {
  width: 200%;
  height: 200%;
  margin-left: -50%;
  margin-top: -50%;
  transition: all 0.5s ease-in;
}
.viewport_css .imgwrapper img {
  width: 100%;
  height: auto;
  display: block;
}
.viewport_css .imgwrapper:hover {
  width: 100%;
  height: 100%;
  margin-left: 0;
  margin-top: 0;
}

  <div class="ImageContainer">
   		  <div id="PurpleColor">
    	  <h2>Videography</h2> 
    	</div>
    
    		<div class="viewport_css">
            <a class="imgwrapper" href="#">
            <img class="dummy" src="links/Home-Videography.jpg" />
			</a></div>
        
        <div class="ImageFooter" id="Purple">
       	  <p class="ImageContainerP">
          	The latest technology</p>
  		</div>
   </div>

Answer 1

您是否尝试过查看 CSS transform 属性？

如果没有，请查看 here (w3c) 或 here(dev.moz) 或仅查看 here (google (search for css transform scale)) 以了解其工作原理。

基本上它会根据您输入的值增加或减少元素的大小

DEMO

Answer 2

我最终对变换功能做了进一步的研究，我想我已经弄明白了。我的图像现在使用彩色背景而不是有色叠加层进行响应，使用不透明度功能进行翻转，这很有效。我不得不放弃的唯一功能是文本。添加一个绝对位置（例如：.photo a{position:absolute}）折叠整个 div。如果有人有解决这个问题的方法，我很想听听。文本是一个很好的补充，但幸运的是我不需要这个项目。

.photo {
max-width: 599px;
width:100%;
background-color:#A54499;
height: auto;
position: relative;
overflow: hidden;
}
.grow img {
width: 100%;
height: auto;
background-color:#A54499;
transition: all 0.5s ease-in-out;
}
.grow img:hover {
display: block;
z-index: 100;
-webkit-transform: scale(1.17);
transform: scale(1.17);
opacity: 0.7;
}

源代码

<div class="ImageContainer">
    <div id="PurpleColor">
          <h2>Videography</h2> 
    </div>

    <div class="photo">
        <a class="grow" href="#">
            <img src="links/Home-Videography.jpg" />
        </a></div>

        <div class="ImageFooter" id="Purple">
            <p class="ImageContainerP">
            The latest technology with outstanding techniques</p>
        </div>

   </div>
</div>