مشکل کشیده شدن تصاویر

[imdeveloper]

سلام
خسته نباشید
من یه باکس دارم که توش عکس پستم قرار میگیره بعد مشکلی که داره اینه که عکس که قرار میگیره کشیده میشه
کد رو توی jsfiddle قرار دادم ممنون میشم بررسی کنید
https://jsfiddle.net/pkh2kjru/

[arash_fa]

اول اینکه در تگ img طول و عرض تعریف کردید.

دوم اینکه چود در عکس از کلاس img-responsive استفاده کردید احتملا قالب تحت بوت استراپ است باید مطمئن شوید این مورد صحیح کار میکند .

ولی در عکس چون طول و عرض دادید برای همین همه عکسها همین مقدار را میگیرد

[imdeveloper]

خب نمیخوام اونجوری بشه
چی باید بکنم؟
میخوام عکس پهناش هرچقدر بود وسط قرار بگیره

[arash_fa]

.pic_product_item {
border-radius: 5px;
box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1);


height: 230px;
overflow: hidden;
position: relative;
width: 45%;
z-index: 9999;
margin:0px auto;
}.pic_product_item > img {
height: 100%;
transition: all 400ms ease-in-out 0s;
width: 100%;
}




<div class="pic_product_item" class="text-center"> <img alt="باقلوا لوزی" class="img-responsive wp-post-image" src="http://www.majidonline.com/file/width/350/1380/2016_Programming_Languages_trends-majidonline.png"> </div>

[imdeveloper]

.pic_product_item {
border-radius: 5px;
box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1);


height: 230px;
overflow: hidden;
position: relative;
width: 45%;
z-index: 9999;
margin:0px auto;
}.pic_product_item > img {
height: 100%;
transition: all 400ms ease-in-out 0s;
width: 100%;
}




<div class="pic_product_item" class="text-center"> <img alt="باقلوا لوزی" class="img-responsive wp-post-image" src="http://www.majidonline.com/file/width/350/1380/2016_Programming_Languages_trends-majidonline.png"> </div>
اینکه الان همون قبلیهه!!!

[imdeveloper]

من میخوام عکس داخل باکس کشیده نشه و عکس داخل باکس وسط باشه نه خود باکس

[imdeveloper]

UP:گریه::متفکر:

[دانیال دزفولی]

https://jsfiddle.net/Eagle_Design/hmz26wuc/

[imdeveloper]

دوستان فک میکنم متوجه منظور من نشدید
شما فرض کنید تصویری که قرار میدین برای پست هاتون سایزش 450x250 هست بعد باکسی که توش عکس قرار میگیره سایزش 250x250 هست
حالا شما چیکار میکنید در این وضعیت؟؟

[دانیال دزفولی]

1. timthumb.php
2. bg cover

[imdeveloper]

کد من الان دقیقا اینجوریه !!
https://jsfiddle.net/pkh2kjru/

[imdeveloper]

UP :متفکر:

[دانیال دزفولی]

لازم به آپ نیست
در مورد اون دوموردی که گفتم یکم سرچ کنید

[Omid Jackson]

معمولا ما ریسپانسیو میکنیم که اندازه درست بگیره
سوالی که پرسیدین خیلی جالب بود، شما یه لیوان دارین ولی میخواین به اندازه دو لیوان آب توش بریزین، به اندازه یه لیوان داخلش جا میشه اما مابقیش ازش میزنه بیرون
وقتی اندازه باکستون از عکستون کوچیکتره دقیقا چطور میخواین بیاد وسط؟ با فتوشاپ یا پینت نمایش بدینش

[mohammad425]

اگه میخواین که در صورت افزایش عرض pic_product_item سایز عکستون تغییر نکنه و کشیده نشه به جای width=100% از max-width=100% استفاده کنید استفاده کنید.
اگه هم منظورتون چیز دیگه ای هست بیشتر توضیح بدین.

[HttpRequest]

فک کنم منظورت این باشه



<div class="p1">
<img src="450.jpg" alt='sample'>
</div>


استایل


.p1{
width: 250px;
overflow: hidden
}
.p1 img{
width: 450px;
transform: translateX(-100px)
}
.p1,.p1 img{
height: 250px
}


اون مقدار -100 که برای translate زدم واسه اینکه فرض رو بر این گذاشتم که اندازه عکس 200 تا از div بزرگتره. می تونی جاش درصد هم بزنی.اگر اندازه های عکسها هم متفاوته باید با اسکریپت دونه دونه مرتب شون کنی