تغيير حجم الصورة التلقائي في تخطيط تدفق CSS لمحاكاة تخطيط جدول HTML

Question

لدي صورة، اعتمادا على دقة الشاشة، يسقط بعيدا عن الأنظار في تخطيط تدفق CSS لأنني قمت بتعيين عرضها وارتفاعها إلى القيم الثابتة.

هل هناك طريقة في تخطيط تدفق CSS لتغيير حجم الصورة تلقائيا بينما يصنع شخص ما نافذة المتصفح أصغر. لقد رأيت هذا القيام به في تخطيط طاولة HTML وأفترض أن الجداول تجعل ذلك ممكنا هناك - هل هناك طريقة للقيام بذلك أيضا في تخطيط تدفق CSS؟

Answer 1

يوضح اختبار سريع أن هذا:

<img class="test" src="testimage.jpg" />

مدموج مع:

img.test { width: 50%; }

تغيير حجم الطريقة التي تريدها ربما. عادة ما يتم تغيير حجم الصورة حتى 50٪ عرض المربع الذي يحتوي عليه، وكذلك تغيير حجم رأسيا، والحفاظ على نسبة العرض إلى الارتفاع.

أما بالنسبة لتغيير حجمها بناء على تغييرات رأسية، فإنها لا تعمل بالطريقة التي تريدها، على الأقل ليس باستمرار. حاولت:

img.test { height: 50%; }

في جوجل كروم الحالي (2.0.172)، فإنه يتغير بشكل غير متسق إلى حد ما؛ التحجيم صحيح ولكنه لا يتم تحديثه بعد سحب نافذة. في فايرفوكس الحالي (3.5)، يبدو أن الارتفاع يتم تجاهله تماما. ليس لدي أي مؤخرا IE، Safari، إلخ لاختبار. لا تتردد في التعديل في تلك النتائج. حتى لو كان أولئك الذين يعملون بشكل جيد، فربما ما زالوا ما تريد تجنبه، والعصا بعرضه.

تعديل:بالنسبة لهذا العمل، يجب أن تكون جميع العناصر التي تحتوي على img.test مع النسب المئوية، غير ثابتة.

أعتقد أنه من هذا الطريق:

• الجسم 100٪ من حجم النافذة.
• IMG هو 50٪ من الجسم.
• IMG هو 50٪ من حجم النافذة.

لنفترض الآن أن أضيف DIV. مثله...

<div class="imgbox" style="width: 100px;">
  <img class="test" src="testimage.jpg" />
</div>

ثم

• الجسم 100٪ من حجم النافذة.
• DIV هو 100px، تجاهل عرض الجسم.
• IMG هو 50٪ من DIV.
• IMG هو 50PX، بغض النظر عن حجم النافذة.

إذا كان Div لديه "العرض: 100٪" على الرغم من أنه يعمل المنطق كما كان من قبل. طالما لها بعض النسبة المئوية، وليس ثابتا، يمكنك اللعب مع النسبة المئوية على IMG وجعلها تعمل بالحجم الذي تريده.

Answer 2

قليلا من تخمين لأن CSS الخاص بي هو القمامة، ولكن نظرا لأن أحدا يجيب، ماذا عن تحديد عرض أو ارتفاع٪ أو في الصورة بحيث يكون في المئة من والديه. لا أدري؟

Answer 3

حاول تحديد ماكس عرض إلى شيء مثل 95٪. أشكر الطريقة التي سوف تتقلص فيها الصورة عندما يكون عرض الحاويات أقل من عرض الصورة. جميع الحاويات الأصل سوف تحتاج إلى adju

max-width:95%;