缩放背景图片

Question

我有一个html / css块，它显示图像并覆盖颜色<div>和文本。

我想使背景<img>能够缩放而不会扩展到整个容器（bootstrap col）。

我尝试使用mouseenter和mouseleave事件在jQuery中添加一个新类，并在img元素中使用CSS max-width和max-height ，但是缩放后图像仍然超出容器。

有小费吗？

 <script> $(document).ready(function(){ $(".category").mouseenter(function(){ $(this).prevAll('img').first().addClass("img-category-zoom"); }); $(".category").mouseleave(function(){ $(this).prevAll('img').first().removeClass("img-category-zoom"); }); }); </script> 

 <style> .category { position: absolute; top: 0px; left: 0px; z-index: 3; width: 100%; height: 100%; background: rgba(172, 44, 48, 0.85); color: white; border-style: solid; border-width: 1px; border-color: rgba(172, 44, 48, 0); } .category:hover { border-style: solid; border-width: 1px; border-color: white; } .img-category { position: relative; z-index: 2; width: 100%; height: 100%; max-width: 100%; max-height: 100%; transition: all 0.5s ease; } .img-category-zoom { transform: scale(1.2); } </style> 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="page"> <div class="container-fluid"> <div class="content row"> <div class="no-padding col-lg-6 col-md-6 col-sm-6 col-xs-6 even"> <img src="http://via.placeholder.com/50x50" alt="" class="img-category img-responsive"> <div class="category">OVERLAY</div> </div> </div> </div> </div> 

Answer 1

您可以添加overflow: hidden到容器div

 $(document).ready(function(){ $(".category").mouseenter(function(){ $(this).prevAll('img').first().addClass("img-category-zoom"); }); $(".category").mouseleave(function(){ $(this).prevAll('img').first().removeClass("img-category-zoom"); }); }); 

 .category { position: absolute; top: 0px; left: 0px; z-index: 3; width: 100%; height: 100%; background: rgba(172, 44, 48, 0.85); color: white; border-style: solid; border-width: 1px; border-color: rgba(172, 44, 48, 0); } .category:hover { border-style: solid; border-width: 1px; border-color: white; } .img-category { position: relative; z-index: 2; width: 100%; height: 100%; max-width: 100%; max-height: 100%; transition: all 0.5s ease; } .img-category-zoom { transform: scale(1.2); } /* Add this */ .col-lg-6, .col-md-6, .col-sm-6, .col-xs-6 { overflow: hidden; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="page"> <div class="container-fluid"> <div class="content row"> <div class="no-padding col-lg-6 col-md-6 col-sm-6 col-xs-6 even"> <img src="http://via.placeholder.com/50x50" alt="" class="img-category img-responsive"> <div class="category">OVERLAY</div> </div> </div> </div> </div>