我试着搜索这个。。。找到了一些信息，但找不到如何将其正确应用于我的CSS脚本。
我有一个简单的weebly页面，我正在做一个简单鼠标悬停效果放大图像
鼠标悬停效果很好，但会切掉图像的顶部和底部。。。根据图片的不同，我把它的左右两侧也剪掉了。
是否对CSS代码进行了修改，允许在图像高度周围进行填充，以便在应用鼠标悬停缩放效果时不会切断图像？
以下是您当前获得的内容的屏幕截图。。。鼠标悬停剪切图像
而当前的代码。。。
<body>
<a href="https://www.bodensurfaces.com/cowboy-trail.html">
<body>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.responsive {
max-width: 300px;
height: auto;
}
.image3 {
width: 100%;
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
.image3:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
</style>
<div class="responsive">
<img class="image3"
src="https://www.bodensurfaces.com/uploads/4/5/8/2/45821353/barley-round_orig.png">
</div>
</body>
试着在图像容器上添加这样的填充，直到没有可见的截止：
.responsive {
max-width: 300px;
height: auto;
padding: 20px; /* add paddings on image container */
}