Question

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

将最小/最大高度像素设置高度设置为自动（此导致我的图像消失）
使用高度的百分比（100％ - 这会导致我的图像消失）
使用媒体查询（仅在断点处进行更改）

我基本上将这个CSS基于帖子Responsive Image Hover - CSS/JQuery，但是我无法理解为高度提供的解决方案或我正在执行它们。

＆＃13;

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

＆＃13;

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

＆＃13;

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>

响应式图像悬停缩放

2 个答案: