Встроенный CSS на <img>без классного кошмара - PullRequest
Новая
       34

Встроенный CSS на <img>без классного кошмара

0 голосов
/ 05 сентября 2018

Я надеюсь, что вы, ребята, можете помочь мне в этом, потому что я на грани веревки с этим кусочком встроенного CSS-кошмара. Так. Я хочу иметь два столбца категорий продуктов, изменить размер фактических столбцов было несложно, но у меня проблема с размытыми изображениями. Они намного больше чем div, но они все еще выглядят размытыми.

Проверка .prod-img-wrap div показывает, что он содержит тег без класса или идентификатора, который имеет некоторый встроенный CSS, который, я полагаю, сгенерирован в другом месте.

Все онлайн-решения показывают более старую версию WooCommerce, в которой все еще были фактические входные данные для размеров изображений отдельно, теперь на панели «Настройка»> «Woocommerce»> «Изображения продуктов» доступны только варианты обрезки. Если я изменю жестко запрограммированные значения в инспекторе, изображение загрузится нормально, поэтому я знаю, что оно загружено правильно.

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

Страница, с которой мне нужна помощь: http://sellgoldnow.co.uk/

EDIT:

Я пытаюсь переопределить css встроенный стиль, сгенерированный здесь: 

<div class="prod-img-wrap"><img src="http://sellgoldnow.co.uk/wp-content     /uploads/2018/09/gold-bracelets1-262x108.jpg" alt="Bracelets" sizes="(max-width: 262px) 100vw, 262px" width="262" height=""></div>

Со следующим css: 

.prod-img-wrap img[style]{
max-width: 705px !important;
width: 705px !important;
height: auto !important;

}

Это та часть, которую я не знаю, как «нацеливаться», так как я не знаком с формулировкой, я впервые ее вижу. 

sizes="(max-width: 262px) 100vw, 262px" width="262" height=""

1 Ответ

0 голосов
/ 05 сентября 2018

Во-первых, изображения размыты, потому что их фактический размер намного меньше, чем область, которую они заполняют. [они только 262px x 108px и растягиваются до 703 x 277px] Так что я бы сказал, что вам нужно добавлять изображения большего размера.

Во-вторых, если вы добавляете намного большие изображения, а woocommerce обрезает их, попробуйте плагин "Regenerate Thumbnails" [имеет миллион + загрузок] и выполните эти шаги.

Наконец, после того, как вы добавили увеличенные изображения и они по-прежнему не работают должным образом, попробуйте изменить настройки обрезки миниатюр в настройщике. Я бы предложил 1-1 или не обрезанный.

Дайте мне знать, если это поможет!

EDIT:

для нацеливания на эти изображения вы можете использовать этот класс + код для его переопределения: 

ul.products li.product.product-category img,
ul.products li.product img {
    max-width: none!important;
    width: auto!important;
}

это обеспечит отображение этих изображений в их реальном размере.

...