Question

我正在尝试将缩放悬停效果应用于一组4个图像，我还需要在视口大小减小时进行缩放。为此，我将图像设置为放大，同时仍保持在其范围内，从而创建缩放效果。只要我使用像素或ems来定义图像的大小，一切都很有效，但是当我使用百分比的max-width来使图像响应时，照片会被拉伸。我created a pen on codepen所以你可以看到发生了什么。

这是我的代码：

＆＃13;

.photo {
    max-width: 23.3%;
    height: auto;
    margin: 0;
    border-color: #FFF;
    border-style: solid;
    background-color: #FFF;
    border-width: 1em;
    float: left;
    cursor: pointer;
    overflow: hidden;
    -webkit-box-shadow: 5px 5px 5px #777;
    box-shadow: 5px 5px 5px #777;   
}

.grow img {
    width: 100%;
    height: auto;
    opacity: 0.7;
    -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
            -o-transition: all 0.5s ease-in-out;
                transition: all 0.5s ease-in-out;  
}

.grow img:hover {
    width: 110%;
    height: auto;
    opacity: 1;
}

＆＃13;

<div class="photo">
         <div class="grow">
                <img src="http://lorempixel.com/output/city-q-c-500-500-6.jpg" 
                alt="Showroom picture 1">
        </div>
</div>
<div class="photo">
         <div class="grow">
                <img src="http://lorempixel.com/output/city-q-c-500-500-6.jpg" 
                alt="Showroom picture 1">
         </div>
</div>
<div class="photo">
         <div class="grow">
                <img src="http://lorempixel.com/output/city-q-c-500-500-6.jpg" 
                alt="Showroom picture 1">
         </div>
</div>
<div class="photo">
         <div class="grow">
                <img src="http://lorempixel.com/output/city-q-c-500-500-6.jpg" 
                alt="Showroom picture 1">
         </div>
</div>

＆＃13;

Answer 1

试试这个：

.photo {
    ...
    overflow: hidden;
    border: none;
}
.grow {
    padding: 7%;
    overflow: hidden;
}
.grow img {
    ...
    vertical-align: bottom; /* removes extra padding */
}
.grow img:hover {
    transform: scale(1.17);
    ...
}

<强> Demo

Answer 2

非常感谢！我使用＆＃34;转换：scale＆＃34;解决了这个问题。属性而不是增加图片的大小。这会在您将see here

悬停在图片上时重新创建放大效果

＆＃13;

.photo {
    max-width: 23%;
    height: auto;
    margin: 0.1%;
    border-color: #FFF;
    border-style: solid;
    background-color: #FFF;
    border-width: 1em;
    float: left;
    overflow: hidden;
    -webkit-box-shadow: 5px 5px 5px #777;
    box-shadow: 5px 5px 5px #777;   
}

.grow img {
    width: 100%;
    height: auto;
    opacity: 0.7;
    vertical-align: bottom;
    -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
            -o-transition: all 0.5s ease-in-out;
                transition: all 0.5s ease-in-out;  
}

img:hover {
    transform: scale(1.2);
    opacity: 1;
}

＆＃13;

<div class="photo">
         <div class="grow">
                <img src="http://lorempixel.com/output/city-q-c-500-500-6.jpg" alt="Building">
        </div>
</div>

<div class="photo">
         <div class="grow">
                <img src="http://lorempixel.com/output/city-q-c-500-500-8.jpg" alt="CBD">
         </div>
</div>

<div class="photo">
         <div class="grow">
                <img src="http://lorempixel.com/output/city-q-c-500-500-10.jpg" alt="Chinatown">
         </div>
</div>

<div class="photo">
         <div class="grow">
                <img src="http://lorempixel.com/output/city-q-c-500-500-2.jpg" alt="Towers">
         </div>
</div>

＆＃13;

现在我想弄清楚如何缩小图片。如果我给scale属性一个较小的值（例如0.8），图片会变小，在框架内留下一个空的空间。

将悬停效果应用于响应式图像

2 个答案: