يتم تقليل حجم صورة CSS في تخطيط div css تلقائيًا بالتناسب ولا يتم تشويه الصورة.

يتضمن: تحجيم الصورة تعيين نسبة أبعاد الصورة

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

يوجد حلان:
الأول هو جعل الصورة وعرض التخطيط وارتفاعه متناسبين ، بحيث يصبح إعداد CSS ميتًاعرضمعارتفاع، الصورة يتم تصغيرها أيضًا ، لن يتم تشويه الصورة.

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

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

ثانيًا ، استخدمCSS max-widthمعmax-heightتحقيق تقليل تلقائي للصورة
بسيط جدًا ، نحتاج إلى استخدامهmax-widthوالارتفاع الأقصى ، بحيث يمكنك ضبط أقصى عرض وأقصى ارتفاع لصورة الكائن ، بحيث يتم تحجيم الصورة بما يتناسب مع الصورة ، لكن الصورة غير مشوهة وواضحة نسبيًا.

يقارن DIVCSS5 التالي الطريقة بالأمثلة للسماح للجميع بإتقان التحكم في CSS لتقليل الصورة ومهارات عدم التشوه.

1. الوصف الأصلي--TOP

هنا ملفمربع DIV（تسمية فئة DIV"Divcss5")عرض CSSمعارتفاع CSSمن الملائم تعيين حد أسود 1 بكسل لـ 300 بكسل و 100 بكسل في نفس الوقت ، ووضع صورة بالداخل (العرض الأصلي للصورة هو 650 بكسل والارتفاع 406 بكسل). وإصلاح عرض وارتفاع الصورة الميتة من خلال CSS.

1、كود مصدر HTML：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> أمثلة لتقليص الصور وعدم تشويهها www.divcss5.com </title>
<style>
.divcss5{ border:1px solid #000; width:300px; height:100px}
.divcss5 img{width:300px; height:100px}
</style>
</head>
<body>
<div class="divcss5">
<img src="img.jpg" />
</div>
</body>
</html>

2. CSS ثابت عرض الصور والارتفاع لقطات من الأمثلة
عرض الصورة الأصلية:

لقطة شاشة أصلية للصورة

css
لقطة شاشة للصورة المشوهة بعد عرض وارتفاع css الثابتين

3. تلخيص ، إصلاح ارتفاع وعرض الصورة في الكائن من خلال CSS ، بحيث إذا لم يتم تصغير الصورة ، سيتم تشويه الصورة.

ثانيًا ، يحل CSS مثال تقليل الصورة دون تشويه--TOP

استخدم max-width: 300px أو max-height: 100px لحل مشكلة قياس الصورة. لكن هناك مشكلة في هذا. إذا قمت بالتكبير وفقًا للعرض ، فستتجاوز الصورة مربع الفائض إذا كانت عالية جدًا. في هذا الوقت ، تحتاج إلى استخدام overflow: hidden لإخفاء محتوى الصورة خارج الأصل. لكن باستخدام max-width أو max-height ، لا يدعم IE6 ، نحتاج إلى تعيين العرض: التعبير (this.width> 300؟ "300px": this.width) ؛ أو الارتفاع: التعبير (this.height> 100؟ "100px ": هذا. ارتفاع) ؛.

حليدعم IE6 أقصى ارتفاع
يحل Div css IE6 دعم max-width

في ظل الظروف العادية ، تحتاج فقط إلى تعيين حد العرض ، على سبيل المثال ، قم فقط بتعيين الحد الأقصى للعرض على 300 بكسل (max-width: 300px) ، ثم استخدمه للأصلoverflow:hiddenلإخفاء الصورة الفائضة ، وللتوافق مع IE6 ، قمنا بتعيين العرض: التعبير (this.width> 300؟ "300px": this.width) ؛

1. حل محددDIV+CSSرمز المثال هو كما يلي:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> أمثلة لتقليص الصور وعدم تشويهها www.divcss5.com </title>
<style>
.divcss5{ border:1px solid #000; width:300px; height:100px;overflow:hidden}
.divcss5 img{max-width:300px;_width:expression(this.width > 300 ? "300px" : this.width);}
</style>
</head>
<body>
<div class="divcss5">
<img src="img.jpg" />
</div>
</body>
</html>

2. لقطات من نتائج اختبار المتصفح

يتم تقليل صورة css ولا يتم تشويه لقطة الشاشة بعد تصغيرها

3. أوجه القصور ، إذا كنت تستخدم هذه الطريقة ، فهي متوافقة مع المتصفحات الرئيسية دون تشويه ، لكن الصورة لا يتم عرضها بشكل كامل.
مقدمة معرفية ذات صلة:
يحل CSS الصورة لكسر DIV：http://www.divcss5.com/wenji/w364.shtml
لا تتجاوز صور CSS عرض الصفحة：http://www.divcss5.com/jiqiao/j52.shtml

4. عرض عبر الإنترنت:عرض الحالة

5. مثال على تنزيل الحزمة

تنزيل الآن (53.883KB)

III. ملخص لتقليل حجم صورة CSS بدون تشويه -TOP

CSS DIVيتم تقليل الصورة وعدم تشوهها. أفضل حل هو البدء من تصميم الصورة نفسها. تصميم الصورة بحيث تتناسب مع العرض والارتفاع في التخطيط. على سبيل المثال ، عند تخطيط الصورة ، يكون العرض 300 بكسل والارتفاع 200 بكسل. ثم عند تصميم مادة الصورة يمكن أن يكون عرض وارتفاع الصورة المقدمة للإضافة 600 بكسل ، أو ارتفاع 400 بكسل ، أو عرض 900 بكسل وارتفاع 600 بكسل. وبهذه الطريقة فقط يمكن للصورة ذات النسب المتساوية ضمان عدم تشوه الصورة الحقيقية وعرضها تمامًا بعد تصغيرها.

إذا كنت بحاجة إلى إعادة الطباعة ، فيرجى الإشارة إلى مصدر المقالة وعنوان URL للمصدر:http://www.divcss5.com/wenji/w632.shtml

توصية ذكية

صورة CSS لا تشوه العرض

1. أضف سمة مناسبة الكائن 1. الرمز لا يدعم IE Browser سمة ملاءمة الكائنات ، يمكن للمتصفحات الأخرى ~ 2. السمات ذات الصلة بالكائن ثانياً ، لا تشوه صورة تنفيذ التحويل (1) الأنماط التالية لعنصر الصورة: (2)...

يتحكم CSS في ترويسة الرأس (حجم الصورة التي تم تحميلها يطابق حجم الترويسة ، ويتم عرض الصورة في المنتصف)

يتم التحكم في حجم خلفية لافتة الرأس بعرض أكبر من 1600 وارتفاع أكبر من 520 ؛ كود html: كود المغلق: .setting-box{ with:100%; background: #00F7DE; margin: 0 auto; position:relative; } .setting-img{ width...

يتم تكبير ارتفاع HTML+CSS Div الأصلي بما يتناسب مع العرض بالتناسب

في بعض الأحيان عند تطوير HTML و CSS للتنمية ، وخاصة مشروع الهاتف المحمول ، هناك عنصران أو 3 عناصر على التوالي. تحتاج إلى متابعة عرض الشاشة لعرض العنصر لتقليل نسبة العنصر ؛ كيف حلها؟ دون مزيد من اللغط ...

CSS - مع ذلك ، لن يتم تشويه الصور بعد الآن! شرح مفصل لسمات ملاءمة الكائن وموضع الكائن

في صور عرض الصفحة ، ستواجه دائمًا أشياء لا تتطابق مع أفكارك ، مثل عرض وارتفاع الصورة الثابتين ، وستتشوه الصورة في الواقع ، توفر CSS خاصية تناسب الكائن ، object-fit: cover ؛ يمكنها حل مشكلة تشويه الصور...