كيف يمكنني منع صورة من تفيض مربع ركن مدور؟

Question

إذا كنت تستخدم هذا الرمز، فلن يتم قص الصورة بواسطة أركان Div's Rounded (الناتجة عن زوايا مربع الصورة التي تغطي تلك المستديرة الدفعة):

<div style="border-radius: 1em; -moz-border-radius: 1em; -webkit-border-radius: 1em; overflow:hidden;">
    <img src="big-image.jpg" />
</div>

هل يعرف أحد كيفية الحصول على DIV المرجع المستدير لمنع صورة طفل من تفيض؟

Answer 1

قد يعمل هذا أو لا يعمل في وضعك، ولكن النظر في صنع صورة خلفية CSS. في FF3، يعمل ما يلي على ما يرام:

u003Cdiv style="n  background-image:   url(big-image.jpg);n  border-radius:      1em;n  height:             100px;n  -moz-border-radius: 1em;n  width:              100px;;text-align:right;direction:rtl"n>u003C/div>

لست متأكدا من وجود حل آخر - إذا قمت بتطبيق حد على الصورة نفسها (قل ذلك، 1em عميق)، تحصل على نفس مشكلة زوايا مربع.

يحرر: على الرغم من أن "إضافة حدود إلى الصورة"، فإن Image Inset صحيحة، فهذه مجرد صورة لا تدفع مع div جزء. للتحقق من النتائج، إضافة style="border:1em solid black;border-radius:1em;-moz-border-radius:1em;" إلى img علامة (مع width و height تعيين مناسب، إذا لزم الأمر).

Answer 2

أحدث كروم، فايرفوكس، وكليب سفاري الصورة إلى دائرة نصف قطرها الحاوية (كما هو مخصص).

http://jsfiddle.net/rqyna/12/embedded/result/

في Firefox 15، أرى الصورة محصورة عند وجود الحاوية {overflow: hidden}. وبعد (يبدو أن لقطة محتوى الطفل كان وأضاف في غامكو 2.0.)

في Chrome 23 & Safari 5، أرى الصورة مقصورة فقط عندما يكون الحاوية {position: static; overflow: hidden} والصورة لديها {position: static}.

Answer 3

حتى عندما overflow تم تعيين إلى hidden, border-radius لا مقطع محتواه. هذا حسب التصميم.

حل واحد سيكون لتعيين border-radius على الصورة وكذلك حاوية لها.

<div style="border-radius: 16px; ...">
    <img src="big-image.jpg" style="border-radius: 16px; ..." />
</div>

وسوف تكون هناك طريقة أخرى لتعيين الصورة كخلفية للحاوية باستخدام background-image; ؛ ولكن هناك مشاكل مع هذه الطريقة في فايرفوكس قبل الإصدار 3 (انظر هذا الخطأ) - ليس أن الاحتياجات التي تزعجك كثيرا.

Answer 4

جرب هذا الحل البديل:

1. الصورة في img العلامة موجودة وهناك تحدد العرض والارتفاع.
2. ثم إخفاءها مع visibility:hidden. وبعد عرض العرض والطول سليما.
3. بعد ذلك، ستقوم بتعيين نفس المصدر كصورة خلفية ستصفح.

<a class="thumb" href="#" style="background-image: url('./img/pic1.jpg');" title="Picture">
  <img border="0" src="./img/pic1.jpg" alt="Pic" height="100" width="150" />
</a>

#page .thumb {
background-repeat: no-repeat;
background-position: left top;
border: 3px #e5dacf solid;
display: block;
float: left;}

#page .thumb img {
display: block;
visibility: hidden;}

Answer 5

هناك أيضا مقطع خلفية الآن في CSS3. يعمل في جميع المتصفحات الرئيسية. الخيارات هي مربع الحدود ومربع الحشو ومحتوى. في حالتك، أعتقد أنك ستحتاج إلى استخدام مربع الحشاد.

-webkit-background-clip: padding-box;
-moz-background-clip:    padding; 
background-clip:         padding-box;

Answer 6

إذا قمت بإجراء صورة صورة خلفية بدلا من المحتويات، فلن يتم تقسيم الصورة الزوايا الدائرية (على الأقل في FF3).

يمكنك أيضا إضافة حشوة إلى DIV أو هامش للصورة لإضافة حشوة إضافية بين الحدود المستديرة والصورة.

Answer 7

بسيط border-radius على ال img العلامة تعمل بشكل جيد في الإصدارات الحالية من Safari 5، Chrome 16، Firefox 9:

<div>
    <img src="big-image.jpg" style="border-radius: 1em;" />
</div>

Answer 8

أعتقد أن هذه المشكلة تحدث عند وجود الصورة أو الوالد الصورة موضعية: مطلق. هذا أمر مفهوم لأن إعداد مطلق يأخذ العنصر من تدفق المستند.

أنا متأكد 90٪ لقد رأيت إصلاحا لهذا، سأقوم بتحديث هذا المنشور عندما أفعل: D

Answer 9

الحصول الإضافي عادة ما يكون فقط ضمن هامش خطأ سمك الحدود. فقط دع دائرة نصف قطرها الداخلية يكون أصغر قليلا حتى يسقط هامش الخطأ تحت الحدود بدلا من التالي

<div style='border-radius:5px;border:thin solid 1px;'>
   <img style='border-radius:4px' />
</div>

Answer 10

تحتاج إلى تحديد عرض دقيق ومثبيث مع الفائض: مخفي، إذا كنت تريد DIV الخاص بك مقطع صورتك