الموضوع: سؤال : كيف أخفي جزء من صورة خلف div

السلام عليكم ورحمة الله وبركاته
أريد أن أستفسر عن كيفية اخفاء جزء من الصورة خلف ال div اذا زاد عن طول معين او عرض معين؟؟
انا رايتها في مواقع كثيرة لكن لم اعرف كيف اطبقها بال css
وهل يمكن التحكم من اين يتم اخفاءها بالضبط (يسار,يمين,أعلى,أسفل) ؟؟
لنفرض ان لدي صورة 375 * 400 بكسل
ولدي div بأبعاد 300*350 بكسل واريد عرض الصورة دون عمل resize لها بإخفاء الجزء الزائد خلف ال div نفسه واذا كان هناك امكانية التحكم في مكان القطع اعلى او اسفل او يسار او يمين او بابعاء معينة .. اتمنى ان تكون الفكرة واضحة .. وجزاكم الله خيرا مقدماً

لا اعرف طريقة بشكل عام... لكن ممكن تكون أحد الافكار استخدام الصورة كخلفية مثلا ل div بابعاد 300*350

هناك اكثر من طريقة واذكر منها استخدام الصورة كخلفية كما قال الاخ DYNMAIC

كود PHP:

 
background-image: url("image.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom; 


background-position هي التي تتحكم بمكان القطع
وضعتها انا right bottom اي ان القطع سوف يكون من الاعلى شمالاً

لنفرض ان لدي صورة 375 * 400 بكسل
ولدي div بأبعاد 300*350 بكسل واريد عرض الصورة

مثال اخر

اذا كنت تريد قطعها من الجانب الايمن فقط

كود PHP:

 
background-image: url("image.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left ; 


حجم الـdiv عمودياً يطابق حجم الصورة عمودياً
حجم الـdiv افقياً يساوي حجم الصورة بعد القطع
اي تطرح المساحة التي تريد قطعها من الجانب الايمن من حجم الصورة افقياً

اتمنى ان اكون افدتك

ممكن طبعا و الطريقة ذكرها الأخ ليوناردو ..

فقط كقاعدة -> الجوانب التي لا تريدها ان تقطع ( يعني تريدها ان تبقى تظهر ) هي التي تموضعها بالأبعاد left right bottom top center
في آخر الكود الذي ذكر الأخ ..

بالتوفيق

يمكنك استخدام طريقة الأخ ليوناردو هذا اذا كانت الصورة خلفية
أم اذا كانت الصورة تستخدم بطريقة تاج الـ img
فعليك استخدام خانة overflow لـ div الحاوي للصورة نفسها
بهذا الشكل

كود PHP:

<div style="height:200px; width:200px; overflow:hidden;">
<img height="655" width="1024" src="big.jpg" />
</div> 


اما لاظهار الجزء الايمن للصورة
فعليك استخدام خاصية direction لـ div
بهذا الشكل

كود PHP:

<div style="height:200px; width:200px; overflow:hidden; direction:rtl;">
<img height="655" width="1024" src="big.jpg" />
</div> 


اما للجزء الايسر

كود PHP:

<div style="height:200px; width:200px; overflow:hidden; direction:ltr;">
<img height="655" width="1024" src="big.jpg" />
</div> 


جزاكم الله خيرا اخواني على مساعدتكم

جزاك الله خيرا .. [Dynamic]
جزاك الله خيرا .. ليوناردو دافينشي
جزاك الله خيرا .. Fez-Soft
جزاك الله خيرا .. سحاب اون لاين

وتقبلوا خالص تقديري وشكري ..