tiyam 01
Registered User
- تاریخ عضویت
- 5 جولای 2009
- نوشته‌ها
- 6,186
- لایک‌ها
- 7,730
این Bing AI خوبه. اگه درست براش توضیح بدی که چی میخوای، کمک میکنه.
ازش اینو خواستم
اگر نسبت پهنا به ارتفاع عکس بیشتر از یک بود، عرض تصویر محصول رو 500 و تصویر بندانگشتی رو 90 کنه و ارتفاع اونا رو خودکار. اگه نسبت پهنا به عرض کمتر از یک بود، ارتفاع تصویر محصول رو 500 ، تصویر بندانگشتی رو 90 و پهنا رو خودکار کنه. تصاویر ترازشون وسط باشه. تو حالت دسکتاپ تصاور بندانگشتی کراپ نشن
اینم نتیجه
حالت دسکتاپ
حالت موبایل
فقط اندازه تصویر توی حالت موبایل هم 500 بود بهش گفتم 240 باشه، کد اونم درست کرد. این بعد از استفاده از اون کد هست.
قبل از این اون عکس وسطی ارتفاعش از بقیه بیشتر بود، کادر عکس کشیده میشد (کش می اومد). با تنظیمات قالب هم درست نمیشد. یا این تصاویر بندانگشتی تو حالت موبایل یکی بالا بود یکی پایین.
کدهایی که داده چطوره؟
ازش اینو خواستم
اگر نسبت پهنا به ارتفاع عکس بیشتر از یک بود، عرض تصویر محصول رو 500 و تصویر بندانگشتی رو 90 کنه و ارتفاع اونا رو خودکار. اگه نسبت پهنا به عرض کمتر از یک بود، ارتفاع تصویر محصول رو 500 ، تصویر بندانگشتی رو 90 و پهنا رو خودکار کنه. تصاویر ترازشون وسط باشه. تو حالت دسکتاپ تصاور بندانگشتی کراپ نشن
کد:
کد css
.single-product .woocommerce-product-gallery__image, .product-image-thumbnail {
display: flex;
justify-content: center;
align-items: center;
height: 100%; /* تنظیم ارتفاع به 100% ارتفاع پدر */
}
.single-product .woocommerce-product-gallery__image img, .product-image-thumbnail img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
object-position: center; /* اضافه کردن object-position برای تراز عکس در وسط کادر */
}
@media (min-width: 992px) {
.product-image-thumbnail img {
object-fit: contain !important;
}
}
js کد
jQuery(document).ready(function($) {
$('.single-product .woocommerce-product-gallery__image img').each(function() {
var $this = $(this);
var naturalWidth = $this[0].naturalWidth;
var naturalHeight = $this[0].naturalHeight;
if (naturalWidth / naturalHeight > 1) {
$this.css({
'width': '500px',
'height': 'auto'
});
} else {
$this.css({
'width': 'auto',
'height': '500px'
});
}
});
$('.product-image-thumbnail').each(function() {
var $this = $(this);
var naturalWidth = $this[0].naturalWidth;
var naturalHeight = $this[0].naturalHeight;
if (naturalWidth / naturalHeight > 1) {
$this.css({
'width': '90px',
'height': 'auto'
});
} else {
$this.css({
'width': 'auto',
'height': '90px'
});
}
});
});اینم نتیجه
حالت دسکتاپ
حالت موبایل
فقط اندازه تصویر توی حالت موبایل هم 500 بود بهش گفتم 240 باشه، کد اونم درست کرد. این بعد از استفاده از اون کد هست.
قبل از این اون عکس وسطی ارتفاعش از بقیه بیشتر بود، کادر عکس کشیده میشد (کش می اومد). با تنظیمات قالب هم درست نمیشد. یا این تصاویر بندانگشتی تو حالت موبایل یکی بالا بود یکی پایین.
کدهایی که داده چطوره؟
Last edited:
