CSS изображение сжимается в фиксированном контейнере - PullRequest
Новая
       31

CSS изображение сжимается в фиксированном контейнере

0 голосов
/ 08 мая 2018

Прежде всего, я использую WordPress для создания собственного сайта с персональным HTML и CSS. Я добавил пустой контейнер указанного размера в свой HTML-код. Название этого контейнерного класса - LiveChat.

Это HTML: 

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

Что я сейчас пытаюсь сделать, это добавить фоновое изображение, которое «увеличено» на 35%. Кроме того, я хочу, чтобы вокруг этого изображения была белая рамка с белой рамкой 15 пикселей. Поэтому я создал этот код: 

.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>

Ответы [ 4 ]

0 голосов
/ 08 мая 2018

Спасибо вам обоим. Обычно код наведения должен иметь слово, но это не так. Сейчас я попрошу у поддержки Avada, потому что тогда у них проблемы с темой ...

0 голосов
/ 08 мая 2018

Вместо использования 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>
0 голосов
/ 08 мая 2018

Причина, по которой ваша граница не отображается, заключается в том, что вы не определили стиль границы: Добавление border-style: solid в CSS исправит это.

Изображение не "масштабируется", потому что вы не добавили :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;
}

EDIT

Я забыл упомянуть об этом раньше. URL в фоновом изображении .LiveChat содержит опечатку. Вам нужно добавить «b» в «baway.de». Я обновил свой ответ, чтобы отразить это.

0 голосов
/ 08 мая 2018

Попробуйте код ниже 

.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>
...