Как изменить размер одного конкретного изображения в пользовательской теме Wordpress? - PullRequest
Новая
       20

Как изменить размер одного конкретного изображения в пользовательской теме Wordpress?

0 голосов
/ 23 мая 2019

Обратите внимание, что я новичок в WordPress и заранее прошу прощения, если я задаю плохо сформированный вопрос или опускаю детали. Я отвечу всем, что вам нужно, как ответчик.

Проблема: у меня есть изображение, которое льется на div, контейнер и т. Д.? (Я также новичок в CSS) в Wordpress. Вот изображение: enter image description here

Я бы хотел, чтобы оно вписывалось в изображение. Также обратите внимание, что изображение показывает другое изображение, когда мышь наводит на него курсор. Странно, что изображение не имеет проблем с изменением размера. Я пробовал множество решений, в том числе. 

img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain
}

И я попытался отредактировать размеры изображения на странице мультимедиа. Часть проблемы в том, что это пользовательская тема. А с пользовательскими темами немного сложнее работать, когда дело доходит до нестандартного CSS (или так я узнал). Любые предложения по этому вопросу с благодарностью. Пожалуйста, дайте мне знать, если у вас есть более подробная информация.

Ответы [ 3 ]

0 голосов
/ 24 мая 2019 

.classname img {width:100%; height:auto;}

/*replace classname with your div class*/
0 голосов
/ 30 мая 2019

Оказалось, что настраивать CSS не нужно. Само изображение на самом деле было отформатировано неправильно. Я не проверял этот вариант, потому что подумал про себя: «Этого не может быть». Оставив это как возможный ответ для людей, которые перепробовали все.

0 голосов
/ 23 мая 2019

Вам не хватает точки с запятой.Пожалуйста, добавьте больше кода, чтобы люди могли видеть, как вы отформатировали изображение. 

img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

Лучше всего сделать div, а затем поместить изображение в него как контейнер. 

img {
        max-width: 100%;
}
    
.imagecontainer {
      width 50%;
      margin-left: auto;
      margin-right: auto;
}

.imagewrapper {
      width 100%;
}
<div class="imagewrapper">
<div class="imagecontainer">
<img src="https://i.stack.imgur.com/olSLV.png">
</div>
</div>
...