Делать все изображения того же размера, переопределяя CSS-код -- css поле с участием wordpress поле с участием elementor пол Связанный проблема

Making all images the same size by overriding CSS code


0
vote

проблема

русский

Я недавно боролся с созданием интернет-магазина.

У меня более 1000 изображений, импортированных в интернет-магазин, но все они разные размеры. Я создаю веб-страницу, используя Plantoror, которая отказывается заставить изображения быть одинаковым размером. Я пытался использовать инструменты разработчика, чтобы увидеть CSS и может видеть следующее:

 <код> <img width="360" height="360" src="https://gronlundsjf.se/wp-content/uploads/2020/08/82830-550-138-360x360.png" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="" srcset="https://gronlundsjf.se/wp-content/uploads/2020/08/82830-550-138-360x360.png 360w, https://gronlundsjf.se/wp-content/uploads/2020/08/82830-550-138-300x300.png 300w, https://gronlundsjf.se/wp-content/uploads/2020/08/82830-550-138-150x150.png 150w, https://gronlundsjf.se/wp-content/uploads/2020/08/82830-550-138-400x400.png 400w, https://gronlundsjf.se/wp-content/uploads/2020/08/82830-550-138-100x100.png 100w" sizes="(max-width: 360px) 100vw, 360px" data-wp-pid="23261">  <img width="360" height="360" src="https://gronlundsjf.se/wp-content/uploads/2020/08/82830-550-138-360x360.png" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="" srcset="https://gronlundsjf.se/wp-content/uploads/2020/08/82830-550-138-360x360.png 360w, https://gronlundsjf.se/wp-content/uploads/2020/08/82830-550-138-300x300.png 300w, https://gronlundsjf.se/wp-content/uploads/2020/08/82830-550-138-150x150.png 150w, https://gronlundsjf.se/wp-content/uploads/2020/08/82830-550-138-400x400.png 400w, https://gronlundsjf.se/wp-content/uploads/2020/08/82830-550-138-100x100.png 100w" sizes="(max-width: 360px) 100vw, 360px" data-wp-pid="23261">   

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

В инструментах разработчика я попытался развить «высоту: авто», и все, кажется, работает нормально. Я просто не уверен, как нацелить все фотографии или как адрес правильного класса.

Любой совет?

Английский оригинал

I have been struggling with creating a webshop recently.

I have over 1000 pictures imported into a webshop but all of them are different sizes. I am creating a web page using Elementor, which refuses to force the images to be the same size. I have tried using developer tools to see the CSS and can see the following:

<img width="360" height="360" src="https://gronlundsjf.se/wp-content/uploads/2020/08/82830-550-138-360x360.png" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="" srcset="https://gronlundsjf.se/wp-content/uploads/2020/08/82830-550-138-360x360.png 360w, https://gronlundsjf.se/wp-content/uploads/2020/08/82830-550-138-300x300.png 300w, https://gronlundsjf.se/wp-content/uploads/2020/08/82830-550-138-150x150.png 150w, https://gronlundsjf.se/wp-content/uploads/2020/08/82830-550-138-400x400.png 400w, https://gronlundsjf.se/wp-content/uploads/2020/08/82830-550-138-100x100.png 100w" sizes="(max-width: 360px) 100vw, 360px" data-wp-pid="23261">  <img width="360" height="360" src="https://gronlundsjf.se/wp-content/uploads/2020/08/82830-550-138-360x360.png" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="" srcset="https://gronlundsjf.se/wp-content/uploads/2020/08/82830-550-138-360x360.png 360w, https://gronlundsjf.se/wp-content/uploads/2020/08/82830-550-138-300x300.png 300w, https://gronlundsjf.se/wp-content/uploads/2020/08/82830-550-138-150x150.png 150w, https://gronlundsjf.se/wp-content/uploads/2020/08/82830-550-138-400x400.png 400w, https://gronlundsjf.se/wp-content/uploads/2020/08/82830-550-138-100x100.png 100w" sizes="(max-width: 360px) 100vw, 360px" data-wp-pid="23261"> 

As you can see, the images have specified width and height in the code. I want to add a CSS line to make sure that all of the images are the same size and override this code.

In the developer tools I have tried to untick the "height:auto" line and everything seems to work fine. I am just not sure how to target all the pictures or how to adress the correct class.

Any advice?

</div
        

Список ответов

0
 
vote

Установите класс для изображения вашего продукта, я называю его «MyProducts».

 <код> .myproducts{      width: 360px;      height: 360px;     }   

в HTML, установите это так ...

Это должно работать для вас.

 

Set a class for your products image, i'm calling it 'myproducts'.

.myproducts{      width: 360px;      height: 360px;     } 

in html, set it like this ...

It should work for you.

</div
 
 
 
 

Связанный проблема

9  Могу ли я установить два фоновых изображения на одном элементе с CSS?  ( Can i set two background images on the same element with css ) 
Образец HTML-кода: <код> belongs_to :y3 Пример файла CSS: <код> belongs_to :y4 Кажется, что часть «B» игнорируется. Есть ли способ Inlclude как из...

1  Лучший способ получить все даты между datea и dateb  ( Best way to get all dates between datea and dateb ) 
Я использую ASP: Calander, и у меня есть объект, который имеет дату начала и дату окончания. Мне нужно получить все даты между этими двумя датами и размещать ...

0  Как сделать левую и правую границу карты в ионном прозрачном  ( How to make the left and right border of a card in ionic transparent ) 
Ниже приведен мой HTML. У меня в общей сложности 3 карты в трех столбцах и хотите только левую и правую сторону быть прозрачными. Я пробовал устанавливать гра...

5  Пользовательский стиль на раскрывающемся меню React-Buttrap  ( Custom style on react bootstraps dropdown menu component ) 
Я пытаюсь применить пользовательский стиль CSS к компоненту RACH BETSTRAP, но не может понять, как получить доступ к элементам, которые не являются явными в J...

4  Сжимается и расти элемент, используя CSS3  ( Shrink and grow an element using css3 ) 
Я пытаюсь реализовать расти и сокращать влияние на элемент div, это работает, но анимация работает слева направо. Хотел бы сделать это из центра. Ниже я раз...

13  Как центрировать текст внутри якоря  ( How to center text inside anchor tag ) 
Я хочу, чтобы мой якорный тег выглядеть как кнопка, и создала этот стиль jsfiddle <код> watch0 Похоже, как я хочу, но как в центре текста горизонтально...

0  Как вы делаете Div пойти по другому меню Div / NAV, которое не исправлено?  ( How do you make a div go under another div nav menu which is not fixed ) 
Я пытаюсь сделать Div, идут под очередной div, в котором ни один не фиксирован элементы. Вот мой код: <Код> ul { list-style-type: none; margin: ...

2  Преобразование: масштаб и позиционирование  ( Transform scale and positioning ) 
Как это, когда я применим шкала преобразования. «Z-индекс изменен»? Что я скучаю? Есть ли какие-нибудь «хитрость» для игры с трансформацией? <код> .thumb > ...

1  Правильное форматирование ссылки HTML - можно ли два равна внутри одного тега <a>? [Дубликат]  ( Proper html link formatting can two divs be inside of one a tag ) 
<в сторону CLASS = "S-NEWACTS S-WELTIVE__info JS-Post-New Imide MB16« Роль = «Статус»> Этот вопрос уже есть ответы здесь : ...

-2  Как вы можете центрировать галерею с HTML и CSS  ( How can you center a gallery with html and css ) 
Я выхожу новый HTML и CSS и надеюсь, что кто-то может помочь. с помощью W3 Schools ( http://www.w3schools.com/css/css_image_gallery. ASP ) Я создал простую ...

15  CSS округлые углы  ( Css rounded corners ) 
Я видел много кодов для этого, но кажется, что он не работает очень хорошо или вообще. Я использовал картинки для округлых углов, но мне нужен код, так что он...

0  Почему это работает над сафари и Firefox, но не на хроме?  ( Why is this working on safari and firefox but not on chrome ) 
У меня есть адаптивное меню навигации, он работает следующим образом: при изменении размера окна появляется значок «Гамбургер» (три строки). Нажатие на этот з...

3  Scrolltop () не работает плавно в Chrome & Safari, но работают в Firefox  ( Scrolltop is not work smoothly in chrome safari but work in firefox ) 
Если вы проверяете эту ссылку http://jsfiddle.net/hbkdt/ . <код> $(window).scroll(function() { $(".fixed").css("top", $(window).scrollTop() + "px");...

1  HTML: масштабные изображения с использованием максимальной высоты / ширины  ( Html scale images using max height width ) 
У меня есть веб-страница, которая отображает кучу изображений. Я хочу убедиться, что ни одно из изображений не превышает 200 пикселей шириной и 200 пикселей п...

0  iPhone 5 симулятор и медиа запрос  ( Iphone 5 simulator and media query ) 
Я видел ответ здесь, как получить медиа-запрос iPhone5 @Media Только экран и (ширина max-Device: 1136px) и (ширина - 960px) и (высота устройства: 640p...

Связанный проблема

9  Могу ли я установить два фоновых изображения на одном элементе с CSS? 
1  Лучший способ получить все даты между datea и dateb 
0  Как сделать левую и правую границу карты в ионном прозрачном 
5  Пользовательский стиль на раскрывающемся меню React-Buttrap 
4  Сжимается и расти элемент, используя CSS3 
13  Как центрировать текст внутри якоря 
0  Как вы делаете Div пойти по другому меню Div / NAV, которое не исправлено? 
2  Преобразование: масштаб и позиционирование 
1  Правильное форматирование ссылки HTML - можно ли два равна внутри одного тега <a>? [Дубликат] 
-2  Как вы можете центрировать галерею с HTML и CSS 
15  CSS округлые углы 
0  Почему это работает над сафари и Firefox, но не на хроме? 
3  Scrolltop () не работает плавно в Chrome & Safari, но работают в Firefox 
1  HTML: масштабные изображения с использованием максимальной высоты / ширины 
0  iPhone 5 симулятор и медиа запрос