Изменение размера изображения пользовательского виджета CSS

Кулагин

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

Поэтому, пожалуйста, имейте это в виду, поскольку, отвечая на этот вопрос, мне нужно, чтобы все было действительно тупо для меня - заранее спасибо за это. Итак- Вопрос: У меня есть веб-сайт high Performancejunkies.com, на нем есть две боковые панели.

На правой боковой панели указаны спонсоры моего веб-сайта, логотип которых я размещаю в этом месте со ссылкой на их веб-сайт.

Я указал, что они получают изображение размером 165x45 пикселей.

Я использую виджет Wordpress Jetpack Image, поскольку он позволяет мне легко вставлять изображения на боковую панель, ссылаться на их сайт, проверять замещающий текст и с легкостью указывать, на каких страницах они видны. Однако моя проблема в том, что я недавно узнал.

когда я устанавливаю в виджет ширину 165 и высоту 45, он меня не «слушает». Итак, я знаю достаточно, что это «должно?» можно ли исправить с помощью специального CSS-кода? и я попробовал кое-что погуглить, попробовал ввести такие вещи, как {.widget #image-9 {width: 165px; высота: 45 пикселей;} }

зачем это ввел? честно говоря, это была попытка использовать различную информацию, которую я нашел в Google, и по прихоти, чтобы это могло сработать.

не сработало, я удалил ее... нашел этот сайт и надеялся, что кто-нибудь поможет, лол Итак, Коулз отмечает: Я хочу, чтобы каждый виджет изображения реактивного ранца на моей боковой панели имел размер только 165x45 пикселей.

Возможно ли это и как мне это сделать? Еще раз заранее спасибо всем, кто сможет помочь.

svetlova

Да, это может привести к сбою, если только вы не создали свой собственный CSS-файл (на который не влияют обновления WP или плагинов) — никогда не стоит изменять что-то непосредственно в основном коде — я предполагаю, что это - это тема, и почти всегда лучше использовать дочернюю тему, чем обновлять тему напрямую, поскольку при обновлении темы вы потеряете все внесенные вами изменения.

Аленка1

Так что я не могу отблагодарить вас, ребята, за то, что вы помогли мне здесь... похоже, мне пришлось немного поиграться с вещами и объединить оба решения. Код KK5st дал мне правильную ширину, когда я изменил ее на следующую:
div.c2 {
отступ: 0 2,5 пикселя;
ширина: 16,66%;}

div.c2 изображение {
ширина: 100%;} Я изменил отступ на 2,5 пикселя, и это дало мне ширину ровно 165 пикселей. Затем, поскольку мой рост не подходил, я использовал этот код в своем CSS:
#третичный .alignnone {
дисплей: блок;
граница: 0 !важно;
высота: 55 пикселей;
} Я увеличил свой рост до 55 после того, как посмотрел на 45 пикселей и мне не понравился его аспект.

Приведенный выше код в CSS не работал бы, поскольку он не давал мне желаемой ширины, когда я добавлял ширину в микс (он практически игнорировал эту часть)

так что с комбинацией двух кодов похоже, что это работает - так что огромное спасибо !!

Последний вопрос: правильно ли я решил эту проблему? Я имею в виду, что это работает, но может ли это что-то помешать мне? особенно если я обновлю свой WordPress 4.4.2 при следующем обновлении?

Андрей Маньшин

Я не уверен на 100%, что вы подразумеваете под этим первым предложением? - конкретно, что означает .c2 или .end?

Я могу решить проблему круглого изображения, попросив их положить его поверх прямоугольного фона белого цвета, чтобы вы не видели его (белого/белого с фоном страницы), но скрепив его вместе, чтобы их логотип оставался пропорциональным.

. Несколько минут назад на другом форуме кто-то предложил мне добавить вот эту кодировку: #третичный .alignnone { дисплей: блок; граница: 0 !важно; высота: Xpx; Вес: Ypx } Похоже, я думаю, что вы говорите то же самое, что и выше.

или вы говорите другое? Если оно другое, то в чем отличие и, по вашему мнению, одно решение лучше другого?

Awwent

О, идиотизм сетевых систем! Идти к http://highperformancejunkies.com/wp-content/themes/magazine-basic/style.css?ver=4.4.2

и примерно в строке 85 (прямо перед всем списком .c2, .c3, .c4 и т. д.) добавьте следующее:

 
div.c2 {

padding: 0 5px;

width: 16.66%;}

div.c2 img {

width: 100%;}

Код (разметка):

ws15

в какой-то момент я считаю, что боковая панель была 165, а не 169, как сейчас. Я могу позволить себе масштабировать все логотипы до 160, это не такая уж большая разница.

но мне нужно иметь возможность ограничить этот контейнер высотой 45 пикселей или около того. Главное, мне нужно, чтобы все изображения были одинакового размера.

Если amsoil дает мне 5 долларов в месяц, а черепаховый воск дает мне 5 долларов, скажем так… несправедливо, чтобы на одном логотип был больше, чем на другом.

В идеале, в худшем случае, я бы предпочел увеличить все изображения до ширины 169 (общая ширина боковой панели), а не уменьшить их, как сейчас.

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

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

совершенно другой размер, чем его естественный размер. Так есть ли решение как-то изменить размер контейнера? если да, то как я могу это сделать?

Насьтя

Мне просто интересно, откуда вы взяли этот размер 165 пикселей.

Ни один из контейнеров не имеет ширины 165 пикселей.

И, насколько я вижу сейчас (два изображения, одно для Turtle Wax и одно для AMSOil), они оба идеально подходят к своему контейнеру?

Но размер контейнера (стороны, в которой они находятся) не 165 пикселей, а примерно 160 (но он не определен в пикселях, поэтому, вероятно, он никогда не будет точным размером в пикселях).

Кроме того, размер изображений, используемых сейчас, СЛИШКОМ велик.

Щелкнув правой кнопкой мыши по любому из них и выбрав «показать изображение», вы увидите, что по крайней мере черепаховый воск окажется в 10-15 раз больше, если не больше.

RiactorZ

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

Сохранил его и обновил свой сайт, и все изображения стали выглядеть одинаково.

Итак, что-то заставляет его принимать нужный размер и не позволяет ему достичь указанной ширины.

Если я не пропущу ни шага? Спасибо за ответ, надеюсь, это вызовет больше идей! было бы здорово, если бы для меня это было так просто!

vladenio

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

Думаю, я действительно просто хочу добавить, чтобы плагин изображения реактивного ранца всегда изменял размер этого виджета до 165x45 пикселей, чтобы он встал на место.

это плохо/вызовет ли это у меня какие-то проблемы?

sdasfafaf

Размер боковой панели составляет 1/6 ширины документа, максимальная ширина которого составляет 1200 пикселей, а минимальная ширина — 320 пикселей.

ширина столбца будет максимальной 200 пикселей; так что сделайте это фактической шириной изображений.

Вы не можете задать изображениям заданную ширину и высоту, не искажая изображения.

Объявите ширину изображения равной 100% и позвольте высоте делать то, что хотите. В какой-то момент вам нужно будет позволить боковому столбцу переместиться под основной контент и иметь более подходящую ширину вместе с изображениями.

Garik3

Не следует изменять размеры изображений с помощью CSS OR HTML, если этого можно избежать. Почему бы вам не изменить размер этих изображений с помощью плагина изменения размера изображений для Wordpress? Или изменить их размер перед загрузкой до нужного размера?

max3_05

Хорошо, я думаю, вам следует добавить отступ: 0; (возможно, вам придется добавить !important) либо в .c2, либо в .end (в зависимости от того, используется ли какой-либо из них где-либо на странице, вам может потребоваться выяснить, какой из них вы хотите использовать).

После этого вы указываете ширину = «200 пикселей» для каждого изображения без установки высоты.

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

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

korosoba

Я добавил его обратно, но поместил только на страницу «О себе в гонках» - только потому, что черепаховый воск сегодня вечером просматривает кое-что, и я не хочу, чтобы это было на главной странице, где они ищут. Это ссылка на страницу с тестовым изображением: http://highperformancejunkies.com/about-me-racing/

Спасибо, что посмотрели на это!

cs free

Поэтому я воспользовался вашим советом и попробовал изменить размер тестового логотипа (нежно-голубое изображение под областью «спонсоры» на правой боковой панели). Я установил его размер ровно 165x45 пикселей, поместил его в боковую панель виджета, протестировал страницу и проверил элемент.

и он все еще по какой-то причине изменяет размер изображения. Я прикрепил фотографию того, что вижу.

естественный размер — 165x45, по команде — 165x45, но отображается как 104x28. есть ли простой способ исправить это?

Похожие темы	Дата
Сайты по направлениям в графическом дизайне	19.10.2024, 18:10
Тема для заказчиков	19.10.2024, 18:10
сколько зарабатывают дизайнеры?	19.10.2024, 18:10
Нужны уроки подробные по рефлексами, отражениям и теням	19.10.2024, 18:10
не работает отзывчивость, текст обрезан	19.10.2024, 18:10
Помогите, пожалуйста, с плагином Photoswipe.	19.10.2024, 18:10
Проблема с HTML в Twitter Card – чего нам не хватает	19.10.2024, 18:10
Как разместить слайдер на изображении	19.10.2024, 18:10
Регистрационная форма: сначала адрес доставки или платежный адрес?	19.10.2024, 18:10
Почему ваш веб-дизайн жизненно важен?	19.10.2024, 18:10

Изменение размера изображения пользовательского виджета CSS

Кулагин

svetlova

Аленка1

Андрей Маньшин

Awwent

ws15

Насьтя

RiactorZ

vladenio

sdasfafaf

Garik3

max3_05

korosoba

cs free

I AM

Интересно