如何在无法将图像封装在div中时隐藏图像上的溢出？

-1

我目前使用CSS3 scale()过渡来为我的图像创建翻转效果，但我想保持翻转图像尺寸相同。所以，效果是图像放大，但它仍然受限于其现有的宽度和高度。如何在无法将图像封装在div中时隐藏图像上的溢出？

我发现了其他的回应，这是通过将图像包装在<div>中并将overflow: hidden添加到该元素来实现的。但是，这是我的特殊情况变得棘手的地方。

我在最近的博客文章列表中使用这种效果来显示图片缩略图，这些图片使用我的Wordpress主题的内置最近发布的帖子元素显示。换句话说，我没有办法编辑这个元素并将图像包装在<div>中。我希望这里有人能帮助我找出一种替代方法来获得我想要的结果。

Wordpress主题被称为X主题。最近的帖子简码显示为[recent_posts count="1"]，但是这是实际使用的代码（通过网页的源代码）：

<div class="x-recent-posts cf horizontal" data-x-element="recent_posts" data-x-params="{&quot;fade&quot;:false}" data-fade="false" > 
    <a class="x-recent-post1 with-image" href="http://demo.theme.co/integrity-1/5-reasons-you-need-the-x-theme/" title="Permalink to: &quot;5 Reasons You Need The X Theme&quot;"> 
    <article id="post-1135" class="post-1135 post type-post status-publish format-standard has-post-thumbnail hentry category-top-10 tag-ponder tag-reflective tag-standard tag-training tag-wisdom tag-x"> 
     <div class="entry-wrap"> 
     <div class="x-recent-posts-img" style="background-image: url(http://demo.theme.co/integrity-1/wp-content/uploads/sites/23/2013/05/x-theme.jpg);"> 
     </div> 
     <div class="x-recent-posts-content"> 
     <h3 class="h-recent-posts">5 Reasons You Need The X Theme</h3> 
     <span class="x-recent-posts-date">May 1, 2014</span> 
     </div> 
     </div> 
    </article> 
    </a> 
</div>

这是我用来创建变焦效果的CSS：

.x-recent-posts .has-post-thumbnail .x-recent-posts-img { 
    transition: 0.3s; 
    -moz-transition: 0.3s; 
    -webkit-transition: 0.3s; 
} 
.x-recent-posts a:hover .has-post-thumbnail .x-recent-posts-img { 
    transform: scale(1.05); 
    -moz-transform: scale(1.05); 
    -webkit-transform: scale(1.05); 
}

我已经尝试添加overflow: hidden每类只是的<div>在HTML，但仍然没有运气来保持图像的限制到原来的大小。我试图创建一个演示元素如何表现的小提琴，但因为元素与我的主题相关，所以它不能正确显示。相反，这里有一个快速的GIF显示它：https://gyazo.com/117a8247692d0074948ccdf406381057

正如你所看到的，图像向下溢出到内容区域。这不是世界上最大的问题，但在网站的其他领域，它有时与标题重叠。我真的很感谢能帮助我解决这个问题的人。

来源

2017-06-15 iamsecretlybatman