Блог

Я пытаюсь отображать изображения от края до края на мобильных устройствах. Проблема в том, что максимальная ширина контейнера установлена на 90%. Поэтому я создал следующий класс с пользовательским CSS для использования на изображениях, которые я хочу отображать от края до края экрана мобильного устройства:

 
@media only screen and (max-width: 768px)
.my-full-width-feature-image {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

 

Моя проблема в том, что приведенный выше CSS-код также заставляет изображение на рисунке отображаться от края до края. Есть ли способ применить мой класс только к элементу img?

Я уже пробовал «.мой-полноформатный-графический img», но это, похоже, тоже не работает.

Ниже показано, как устроен HTML на моем сайте WordPress.

 
<figure class="wp-block-image size-large my-full-width-feature-image">
<img width="780" height="520" src="https://nomadandinlove.com/wp-content/uploads/swapfiets_review.jpg" data-src="https://nomadandinlove.com/wp-content/uploads/swapfiets_review.jpg" alt="swapfiets bike sharing bicycle with blue tire in berlin with cherry blossoms in the background">
<figcaption>Cherry blossom hunting in Berlin with our monthly bike rental, Swapfiets</figcaption>
</figure>

 

После дальнейшего расследования я обнаружил, что у меня есть плагин, который помещал все мои элементы img внутри элемента div.

Поэтому мне просто нужно было изменить свой пользовательский код следующим образом:

 
@media only screen and (max-width: 768px)
.my-full-width-feature-image div {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

 

Теперь только элемент img, который находится в div, отображается от края до края, а элемент figcaption остается неизменным.