Лучшая практика для полноразмерного изображения в WordPress

Question

Я пытаюсь сделать рекомендуемое изображение шириной 100%, даже если его размер в пикселях не равен ширине экрана / тела: я использую переменную 'full' при вызове изображения через get_the_post_thumbnail, но я не уверен, что это лучшая практика для достижения того, чего я хочу.

• Я могу использовать некоторый JavaScript (он работает, но я не знаю, нравится ли мне это больше или это правильно).
• Я могу загружать очень (2000/2500 px) большие изображения, позволяя scrset управлять меньшими размерами. Но что, если кто-то использует очень большой экран? А как насчет размера / качества самого изображения (даже если я знаю, как справиться со сжатием изображения).
• Я могу удалить ширину и высоту, а также атрибут изображения size =(max-width:pixel). Таким образом, я могу добавить некоторые правила CSS, которые позволят мне добавить 100% видимости к изображению. Но я не знаю, если это правильно.

Любое предложение?

Спасибо

Answer 1

Вы можете сделать изображение фоновым изображением элемента div (или другого блока), а затем применить к нему свойство background-size. Например:

#div-element {
    width: 100%;
    height: 200px; // Could be anything
    background: ulr('path-to-image') center center no-repeat // there are multiple options for this
    background-size: cover // This stretches the image to fill the div
}

Это работает для меня! Надеюсь, это поможет вам. Ура!

Answer 2

Добро пожаловать в ТАК,

Я бы порекомендовал вам использовать CSS:

#image{
  width:  100%;
}

поэтому установите ширину на 100% и просто опустите высоту, и ваша картинка будет растянута на всю ширину, а высота будет в исходном соотношении к ширине. О загрузке больших изображений, если вы это сделаете, будет больше времени загрузки для сайта. Наконец, вы можете использовать JavaScript для этого, если хотите.

Answer 3

Вы можете установить во всех элементах изображения, используя тег HTML для изображения:

img {
  width:  100%;
}

Помните, что это будет применяться ко всем элементам, поэтому изображение всегда будет на 100% внутри div/ элемента, внутри которого они находятся.

Для любой проблемы, с которой вы столкнетесь, вы всегда можете использовать Bootstrap в качестве справочного материала для ее решения. http://getbootstrap.com/

Answer 4

Если вы используете the_post_thumbnail после перевода PHP-кода в HTML-код вы можете получить доступ к атрибуту srcset в img тег. в srcset Вы можете получить доступ к другому размеру изображения. Таким образом, вы можете управлять размером изображения.

Таким образом, вы можете выбрать использование whith: 100% в css или использовать srcset

прочитайте это для srcset

https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images