html - 响应图像悬停缩放

Question

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

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

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

.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