CSS 图片在固定容器中收缩

Question

首先，我正在使用wordpress创建我自己的个人网站HTML和CSS。我在 HTML 代码中添加了一个指定大小的空容器。这个容器的名字-class是LiveChat。

这是HTML:

<div class="LiveChat">     
    <img src="https://baway.de/wp-content/uploads/2018/05/Bild1.jpg" alt="Live Chat">
</div>

我现在要做的是添加一张背景图片，"zoomed" 增加了 35%。此外，我希望此图像周围有一个 15px 白色边框的白色边框。因此我创建了这段代码：

.LiveChat {
        background-image: url("https://away.de/wp-content/uploads/2018/05/Bild1.jpg");
        background-repeat: no-repeat;
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        height: auto;
        overflow: hidden;
        border-color: white;
        border-width: 15px;
    }
    .LiveChat img {
        -webkit-transform: scale(1.35);
        transform: scale(1.35);
    }

首先，我的元素周围没有白色边框。第二个问题是，元素的右侧有一个白色条...

现在我想添加悬停效果。当有人将鼠标悬停在背景图片上时，缩放比例应为 100%。遗憾的是，使用这个时没有任何反应：

.LiveChat:hover img{
    -webkit-transform: scale(2.0);
    transform: scale(2.0);
}

由于我现在整天都在尝试，希望各位有经验的指点一下。非常感谢！

.LiveChat {
            background-image: url("https://away.de/wp-content/uploads/2018/05/Bild1.jpg");
            background-repeat: no-repeat;
            display: block;
            margin-left: auto;
            margin-right: auto;
            width: 100%;
            height: auto;
            overflow: hidden;
            border-color: white;
            border-width: 15px;
        }
        .LiveChat img {
            -webkit-transform: scale(1.35);
            transform: scale(1.35);
        }
        .LiveChat:hover img{
        -webkit-transform: scale(2.0);
        transform: scale(2.0);
    }

<div class="LiveChat">     
     <img src="https://baway.de/wp-content/uploads/2018/05/Bild1.jpg" alt="Live Chat">
    </div>

Answer 1

试试下面的代码

.LiveChat {
    background-repeat: no-repeat;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 452px;
    height: 452px;
    overflow: hidden;
   border:15px solid #ddd;
    overflow: hidden;

}
.LiveChat img {
    -webkit-transform: scale(1.35);
    transform: scale(1.35);
       transition: all 2s ease-in 0s;
  -webkit-transition:  all 2s ease-in 0s;
  -ms-transition:  all 2s ease-in 0s;
  cursor: pointer;

}
.LiveChat:hover img{
    -webkit-transform: scale(2.0);
    transform: scale(2.0);
}

<div class="LiveChat">     
  <img src="https://baway.de/wp-content/uploads/2018/05/Bild1.jpg" alt="Live Chat">
</div>

Answer 2

不使用 border-color: white; 和 border-width: 15px;，而是使用 border: 15px solid white。我使用了黑色，因此出于演示目的可以看到它。

缩放效果很好。

.LiveChat {
            background-image: url("https://away.de/wp-content/uploads/2018/05/Bild1.jpg");
            background-repeat: no-repeat;
            display: block;
            margin-left: auto;
            margin-right: auto;
            width: 100%;
            height: auto;
            overflow: hidden;
            border: 15px solid black;
        }
        .LiveChat img {
            -webkit-transform: scale(1.35);
            transform: scale(1.35);
        }
        .LiveChat img:hover {
        -webkit-transform: scale(2.0);
        transform: scale(2.0);
    }

<div class="LiveChat">     
     <img src="https://baway.de/wp-content/uploads/2018/05/Bild1.jpg" alt="Live Chat">
    </div>

Answer 3

你的边框没有显示的原因是你没有定义边框样式：将 border-style: solid 添加到 CSS 将解决此问题。

图像不是 "zooming"，因为您还没有将 :hover 添加到 css。

我已将 width: 100% 添加到图像以确保它填充 div 容器。

试试这个代码：

.LiveChat {
    background-image: url("https://away.de/wp-content/uploads/2018/05/Bild1.jpg");
    background-repeat: no-repeat;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: auto;
    overflow: hidden;
    border-style: solid;
    border-color: white;
    border-width: 15px;
}
.LiveChat img {
    -webkit-transform: scale(1.35);
    transform: scale(1.35);
    width: 100%;
}
.LiveChat img:hover {
    -webkit-transform: scale(2.0);
    transform: scale(2.0);
}

<div class="LiveChat">     
 <img src="https://baway.de/wp-content/uploads/2018/05/Bild1.jpg" alt="Live Chat">
</div>

值得注意的是，您可以通过对样式进行分组来进一步清理 css：

.LiveChat {
    background: url("https://baway.de/wp-content/uploads/2018/05/Bild1.jpg") no-repeat;
    display: block;
    margin: auto;
    width: 100%;
    height: auto;
    overflow: hidden;
    border: 15px solid white;
}

编辑

我之前忘了提这个。您的 .LiveChat 背景图片中的 url 有错字。您需要将 'b' 添加到 'baway.de'。我更新了我的答案以反映这一点。

Answer 4

谢谢你们。通常悬停代码应该是文字，但它不是。我现在会问 Avada 支持，因为那一定是他们的主题有问题...

CSS 图片在固定容器中收缩

CSS Image shrink in a fixed container

html

css

hover

mousehover

编辑