وضع عرض الصور النسبي لتغيير حجم المتصفح

Question

إذا كان لدي صورة مجتمعة بأسلوب:

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

img.test { width: 50%;}

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

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

Answer 1

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

Answer 2

ستحتاج إلى تحديد يدويا width و height خصائص للحصول على الصورة للحفاظ على أبعادها. لن يكون هذا صعبا للغاية إذا كنت تستخدم ترميز جانب الخادم (PHP / ASP).

هناك طريقة أخرى للقيام بذلك هي استخدام JavaScript لحساب وتغيير حجم الصورة بشكل حيوي.

Answer 3

لا، ستظل الصورة 50٪ من DIV، وإذا كانت DIV هي نسبة من الصفحة، لا يهم ذلك.

Answer 4

لها جميع النسب: قد يكون الحف المحيط هو 2/3 من النافذة بأكملها، وسوف تشير الصورة 1/2 من ذلك. يتم حساب كل ذلك قبل عرضها، مجرد مجموعة من الأرقام الطفرة. ؛د