كيف يمكنني عرض جزء فقط من الصورة في HTML/CSS؟

Question

لنفترض أنني أريد طريقة لعرض المركز مقاس 50 × 50 بكسل فقط لصورة بحجم 250 × 250 بكسل بتنسيق HTML.كيف أقوم بذلك.أيضًا، هل هناك طريقة للقيام بذلك لمراجع css:url()؟

أنا على علم مقطع في CSS، ولكن يبدو أن هذا يعمل فقط عند استخدامه مع الموضع المطلق.

Answer 1

إحدى الطرق للقيام بذلك هي تعيين الصورة التي تريد عرضها كخلفية في حاوية (td، div،span، إلخ) ثم ضبط موضع الخلفية للحصول على الصورة المتحركة التي تريدها.

Answer 2

على الرغم من أنك قبلت الإجابة بالفعل، سأضيف فقط أن هناك (غير معروف إلى حد ما) clip خاصية CSS، على الرغم من أنها يفعل تتطلب أن يكون العنصر الذي يتم قصه position: absolute; (وهو عار):

.container {
  position: relative;
}
#clip {
  position: absolute;
  clip: rect(0, 100px, 200px, 0);
  /* clip: shape(top, right, bottom, left); NB 'rect' is the only available option */
}

<div class="container">
  <img src="http://lorempixel.com/200/200/nightlife/3" />
</div>
<div class="container">
  <img id="clip" src="http://lorempixel.com/200/200/nightlife/3" />
</div>

العرض التوضيحي لـ JS Fiddle, ، للتجريب.

لتكملة الإجابة الأصلية - متأخرة إلى حد ما - أقوم بالتحرير لإظهار استخدام clip-path, ، الذي حل محل الإهمال الآن clip ملكية.

ال clip-path تسمح الخاصية بمجموعة من الخيارات (أكثر من النسخة الأصلية). clip)، ل:

• inset - أشكال مستطيلة/مكعبة، محددة بأربع قيم على أنها "المسافة من" (top right bottom left).
• circle — circle(diameter at x-coordinate y-coordinate).
• ellipse — ellipse(x-axis-length y-axis-length at x-coordinate y-coordinate).
• polygon - محددة بسلسلة من x/y الإحداثيات فيما يتعلق بأصل العنصر في الزاوية العلوية اليسرى.بما أن المسار مغلق تلقائيًا، فإن الحد الأدنى الواقعي لعدد النقاط للمضلع يجب أن يكون ثلاث، وأي أقل من ذلك (اثنتان) يمثل خطًا أو (واحدًا) يمثل نقطة: polygon(x-coordinate1 y-coordinate1, x-coordinate2 y-coordinate2, x-coordinate3 y-coordinate3, [etc...]).
• url - يمكن أن يكون هذا إما عنوان URL محلي (باستخدام محدد معرف CSS) أو عنوان URL لملف خارجي (باستخدام مسار ملف) لتحديد ملف SVG، على الرغم من أنني لم أجرب أيًا منهما (حتى الآن)، لذلك لا يمكن أن تقدم أي فكرة عن فائدتها أو التحذير.

div.container {
  display: inline-block;
}
#rectangular {
  -webkit-clip-path: inset(30px 10px 30px 10px);
  clip-path: inset(30px 10px 30px 10px);
}
#circle {
  -webkit-clip-path: circle(75px at 50% 50%);
  clip-path: circle(75px at 50% 50%)
}
#ellipse {
  -webkit-clip-path: ellipse(75px 50px at 50% 50%);
  clip-path: ellipse(75px 50px at 50% 50%);
}
#polygon {
  -webkit-clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);
  clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);
}

<div class="container">
  <img id="control" src="http://lorempixel.com/150/150/people/1" />
</div>
<div class="container">
  <img id="rectangular" src="http://lorempixel.com/150/150/people/1" />
</div>
<div class="container">
  <img id="circle" src="http://lorempixel.com/150/150/people/1" />
</div>
<div class="container">
  <img id="ellipse" src="http://lorempixel.com/150/150/people/1" />
</div>
<div class="container">
  <img id="polygon" src="http://lorempixel.com/150/150/people/1" />
</div>

العرض التوضيحي لـ JS Fiddle, ، للتجريب.

مراجع:

• clip - ملحوظة: إهمال.
• clip-path (MDN).
• clip-path (W3C).

Answer 3

البديل الآخر هو ما يلي، على الرغم من أنه ليس الأنظف لأنه يفترض أن الصورة هي العنصر الوحيد في الحاوية، كما في هذه الحالة:

<header class="siteHeader">
  <img src="img" class="siteLogo" />
</header>

يمكنك بعد ذلك استخدام الحاوية كقناع بالحجم المطلوب، وإحاطة الصورة بهامش سلبي لنقلها إلى الموضع الصحيح:

.siteHeader{
    width: 50px;
    height: 50px;
    overflow: hidden;
}

.siteHeader .siteLogo{
    margin: -100px;
}

يمكن رؤية العرض التوضيحي في هذا JSFiddle.

يبدو أنه يعمل فقط مع IE>9، وربما جميع الإصدارات المهمة من جميع المتصفحات الأخرى.