كيف يمكنني توحيد صورة لتناسب حاوية "div"؟

Question

كيف يمكنك توحيد صورة كبيرة بحيث تتناسب مع حاوية Div أصغر مع الحفاظ على نسبة العرض: ارتفاعها؟

---

مثال: Stackoverflow.com - عند إدراج صورة على لوحة المحرر والصورة كبيرة جدًا بحيث لا تتناسب مع الصفحة ، يتم تغيير حجم الصورة تلقائيًا.

Answer 1

لا تقم بتطبيق عرض أو ارتفاع صريح على علامة الصورة. بدلاً من ذلك ، أعطها:

max-width:100%;
max-height:100%;

ايضا، height: auto; إذا كنت تريد تحديد عرض فقط.

مثال: http://jsfiddle.net/xwrvxser/1/

img {
    max-width: 100%;
    max-height: 100%;
}

.portrait {
    height: 80px;
    width: 30px;
}

.landscape {
    height: 30px;
    width: 80px;
}

.square {
    height: 75px;
    width: 75px;
}

Portrait Div
<div class="portrait">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Landscape Div
<div class="landscape">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Square Div
<div class="square">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Answer 2

كائن

اتضح أن هناك طريقة أخرى للقيام بذلك.

<img style='height: 100%; width: 100%; object-fit: contain'/>

سوف تفعل العمل. إنها أشياء CSS 3.

كمان: http://jsfiddle.net/mbhb4/7364/

Answer 3

حاليًا لا توجد طريقة للقيام بذلك بشكل صحيح بطريقة حتمية ، مع صور ذات حجم ثابت مثل JPEGS أو ملفات PNG.

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

يعتمد اختيار ما إذا كنت تريد القيام بالارتفاع أو العرض على صورتك وأبعاد الحاوية:

1. إذا كانت صورتك وحاويةك على حد سواء "على شكل صورة" أو كلاهما "على شكل المناظر الطبيعية" (أطول من كونهما واسعة ، أو أوسع منهما طويل القامة ، على التوالي) ، فلا يهم أي من الطول أو العرض "٪ 100" .
2. إذا كانت صورتك صورة ، وكانت الحاوية الخاصة بك منظرًا طبيعيًا ، فيجب عليك تعيينك height="100%" على الصورة.
3. إذا كانت صورتك منظرًا طبيعيًا ، وكانت الحاوية صورة ، فيجب عليك ضبطها width="100%" على الصورة.

إذا كانت صورتك عبارة عن SVG ، وهو تنسيق صورة متجه متغير الحجم ، فيمكنك الحصول على التوسع لتناسب الحاوية تلقائيًا.

عليك فقط التأكد من أن ملف SVG يحتوي على أي من هذه الخصائص المحددة في <svg> بطاقة شعار:

height
width
viewbox

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

Answer 4

فيما يلي حل من شأنه أن يتوافق بشكل رأسي وأفقيًا على IMG داخل DIV دون أي تمدد حتى لو كانت الصورة المرفوعة صغيرة جدًا أو أكبر من أن تتناسب مع DIV.

محتوى HTML:

<div id="myDiv">
  <img alt="Client Logo" title="Client Logo" src="Imagelocation" />
</div>

محتوى CSS:

#myDiv
{
  height: 104px;
  width: 140px;
}
#myDiv img
{
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  display: block;
}

الجزء jQuery:

var logoHeight = $('#myDiv img').height();
    if (logoHeight < 104) {
        var margintop = (104 - logoHeight) / 2;
        $('#myDiv img').css('margin-top', margintop);
    }

Answer 5

اجعلها بسيطة!

إعطاء الحاوية أ مُثَبَّت height ثم ل img علامة داخلها ، تعيين width و max-height.

<div style="height: 250px">
     <img src="..." alt=" " style="width: 100%;max-height: 100%" />
</div>

الفرق هو أنك تقوم بتعيين width ليكون 100 ٪ ، وليس max-width.

Answer 6

اختراق جميل.

لديك طريقتان لجعل الصورة مستجيبة.

1. عندما تكون الصورة صورة خلفية.

#container{
    width: 300px;
    height: 300px;
    background-image: url(http://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

<div id="container"><div>

شغلها هنا

---

لكن ينبغي للمرء أن يستخدم img علامة لوضع الصور كما هو أفضل من background-image من ناحية كبار المسئولين الاقتصاديين كما يمكنك الكتابة الكلمة الرئيسية في ال alt التابع img بطاقة شعار. لذلك هنا يمكنك جعل الصورة مستجيبة.

2. عندما تكون الصورة في img بطاقة شعار.

#container{
    max-width: 400px;
    overflow: hidden;
}
img{
    width: 100%;
    object-fit: contain;
}

<div id="container">
   <img src="http://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg" alt="your_keyword"/>
<div>

شغلها هنا

Answer 7

تحقق من الحل: http://codepen.io/petethepig/pen/dvfsa

إنه مكتوب في CSS النقي ، دون أي رمز JavaScript. يمكنه التعامل مع الصور من أي حجم وأي اتجاه.

بالنظر إلى مثل هذا HTML:

<div class="image">
  <div class="trick"></div>
  <img src="http://placekitten.com/415/200"/>
</div>

سيكون رمز CSS:

.image {
  font-size: 0;
  text-align: center;
  width: 200px;  /* Container's dimensions */
  height: 150px;
}
img {
  display: inline-block;
  vertical-align: middle;
  max-height: 100%;
  max-width: 100%;
}
.trick {
  display: inline-block;
  vertical-align: middle;
  height: 150px;
}

Answer 8

يمكنك ضبط الصورة كخلفية على DIV ، ثم استخدام خاصية بحجم الخلفية CSS:

background-size: cover;

فإنه سوف "قم بتدوين صورة الخلفية لتكون كبيرة قدر الإمكان بحيث تتم تغطية منطقة الخلفية بالكامل بواسطة صورة الخلفية. قد لا تكون بعض أجزاء صورة الخلفية في منطقة تحديد المواقع الخلفية" -- W3Schools

Answer 9

لقد نشرت للتو مكونًا إضافيًا JQuery يقوم بالضبط بما تحتاجه مع الكثير من الخيارات:

https://github.com/gestixi/image-scale

الاستخدام:

لغة البرمجة

<div class="image-container">
    <img class="scale" data-scale="best-fit-down" data-align="center" src="img/example.jpg">
</div>

جافا سكريبت

$(function() {
    $("img.scale").imageScale();
});

Answer 10

هذا الحل لا يمد الصورة ويملأ الحاوية بأكملها ، لكنه يقطع بعض الصور.

لغة البرمجة:

 <div><img src="/images/image.png"></div>

CSS:

div {
    width: 100%;
    height: 10em;
    overflow: hidden;

img {
    min-width: 100%;
    min-height: 100%;
}

Answer 11

ما يلي يعمل بشكل مثالي بالنسبة لي:

img{
   height: 99999px;
   object-fit:contain;
   max-height: 100%;
   max-width: 100%;    
   display: block;
   margin: auto auto;
}

Answer 12

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

/* For this demo only */
.container {
  max-width: 300px;
  margin: 0 auto;
}
.img-frame {
  box-shadow: 3px 3px 6px rgba(0, 0, 0, .15);
  background: #ee0;
  margin: 20px auto;
}

/* This is for responsive container with specified aspect ratio */
.aspect-ratio {
  position: relative;
}
.aspect-ratio-1-1 {
  padding-bottom: 100%;
}
.aspect-ratio-4-3 {
  padding-bottom: 75%;
}
.aspect-ratio-16-9 {
  padding-bottom: 56.25%;
}

/* This is the key part - position and fit the image to the container */
.fit-img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  max-width: 80%;
  max-height: 90%
}
.fit-img-bottom {
  top: auto;
}
.fit-img-tight {
  max-width: 100%;
  max-height: 100%
}

<div class="container">

  <div class="aspect-ratio aspect-ratio-1-1 img-frame">
    <img src="//placehold.it/400x300" class="fit-img" alt="sample">
  </div>

  <div class="aspect-ratio aspect-ratio-4-3 img-frame">
    <img src="//placehold.it/400x300" class="fit-img fit-img-tight" alt="sample">
  </div>

  <div class="aspect-ratio aspect-ratio-16-9 img-frame">
    <img src="//placehold.it/400x400" class="fit-img" alt="sample">
  </div>

  
  <div class="aspect-ratio aspect-ratio-16-9 img-frame">
    <img src="//placehold.it/300x400" class="fit-img fit-img-bottom" alt="sample">
  </div>
  
</div>

يمكنك تعيين Max-Width و Max Must بشكل مستقل ؛ ستحترم الصورة الأصغر (اعتمادًا على القيم ونسبة العرض إلى الارتفاع للصورة). يمكنك أيضًا تعيين الصورة لتكون محاذاة كما تريد (على سبيل المثال ، للحصول على صورة منتج على خلفية بيضاء لا نهائية يمكنك وضعها في القاع بسهولة).

Answer 13

امنح الارتفاع والعرض الذي تحتاجه لصورتك إلى DIV التي تحتوي علىu003Cimg> بطاقة شعار. لا تنس إعطاء الارتفاع/العرض في علامة النمط المناسب.

في الu003Cimg> علامة ، أعط max-height و max-width كما 100 ٪.

<div style="height:750px; width:700px;">
    <img alt="That Image" style="max-height:100%; max-width:100%;" src="">
</div>

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

Answer 14

يتم تكييف الرمز أدناه من الإجابات السابقة ويتم اختباره من قبلي باستخدام صورة تسمى storm.jpg.

هذا هو رمز HTML الكامل لصفحة بسيطة تعرض الصورة. هذا يعمل بشكل مثالي وتم اختباره من قبلي مع www.resizemybrowser.com. ضع رمز CSS في الجزء العلوي من رمز HTML الخاص بك ، تحت قسم رأسك. ضع رمز الصورة أينما تريد الصورة.

<html>
    <head>
        <style type="text/css">
            #myDiv
            {
                  height: auto;
                  width: auto;
            }
            #myDiv img
            {
                max-width: 100%;
                max-height: 100%;
                margin: auto;
                display: block;
            }
        </style>
    </head>

    <body>
        <div id="myDiv">
            <img src="images/storm.jpg">
        </div>
    </body>
</html>

Answer 15

عليك أن تخبر المتصفح ارتفاع المكان الذي تضعه فيه:

.example {
    height: 220px; /* DEFINE HEIGHT */
    background: url('../img/example.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

Answer 16

لقد ركزت وتوسيع نطاق صورة داخل الارتباط التشعبي على حد سواء أفقيًا وعموديًا بهذه الطريقة:

#link {
    border: 1px solid blue;
    display: table-cell;
    height: 100px;
    vertical-align: middle;
    width: 100px;
}
#link img {
    border: 1px solid red;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-height: 60px;
    max-width: 60px;
}

تم اختباره في Internet Explorer و Firefox و Safari.

مزيد من المعلومات حول التركيز هنا.

Answer 17

الجواب المقبول من Thorn007 لا يعمل متى الصورة صغيرة جدا.

لحل هذا ، أضفت أ عامل المقياس. بهذه الطريقة ، يجعل الصورة أكبر وتملأ حاوية Div.

مثال:

<div style="width:400px; height:200px;">
  <img src="pix.jpg" style="max-width:100px; height:50px; transform:scale(4); transform-origin:left top;" />
</div>

ملحوظات:

1. لـ WebKit ، يجب عليك إضافة -webkit-transform:scale(4); -webkit-transform-origin:left top; في النمط.
2. مع عامل مقياس 4 ، لديك الحد الأقصى = 400/4 = 100 و Max-Height = 200/4 = 50
3. الحل البديل هو تعيين Max-Width و Max-Height بنسبة 25 ٪. إنه أبسط.

Answer 18

<style type="text/css">
    #container{
        text-align: center;
        width: 100%;
        height: 200px; /* Set height */
        margin: 0px;
        padding: 0px;
        background-image: url('../assets/images/img.jpg');
        background-size: content; /* Scaling down large image to a div */
        background-repeat: no-repeat;
        background-position: center;
    }
</style>

<div id="container>
    <!-- Inside container -->
</div>

Answer 19

يحرر: كان لموقع الصور السابق القائم على الجدول مشكلات في Internet Explorer 11 (max-height لا يعمل في display:table عناصر). لقد استبدلت به تحديد المواقع القائمة على الخط والذي لا يعمل بشكل جيد في كل من Internet Explorer 7 و Internet Explorer 11 ، ولكنه يتطلب أيضًا رمزًا أقل.

---

ها هو رأيي في هذا الموضوع. ستعمل فقط إذا كان للحاوية حجم محدد (max-width و max-height لا يبدو أن تتوافق مع الحاويات التي لا تحتوي على حجم ملموسة) ، لكنني كتبت محتوى CSS بطريقة تسمح بإعادة استخدامها (أضف picture-frame الطبقة و px125 فئة الحجم إلى الحاوية الحالية).

في CSS:

.picture-frame
{
    vertical-align: top;
    display: inline-block;
    text-align: center;
}

.picture-frame.px125
{
    width: 125px;
    height: 125px;
    line-height: 125px;
}

.picture-frame img
{
    margin-top: -4px; /* Inline images have a slight offset for some reason when positioned using vertical-align */
    max-width: 100%;
    max-height: 100%;
    display: inline-block;
    vertical-align: middle;
    border: 0; /* Remove border on images enclosed in anchors in Internet Explorer */
}

وفي HTML:

<a href="#" class="picture-frame px125">
    <img src="http://i.imgur.com/lesa2wS.png"/>
</a>

العرض التوضيحي

/* Main style */

.picture-frame
{
    vertical-align: top;
    display: inline-block;
    text-align: center;
}

.picture-frame.px32
{
    width: 32px;
    height: 32px;
    line-height: 32px;
}

.picture-frame.px125
{
    width: 125px;
    height: 125px;
    line-height: 125px;
}

.picture-frame img
{
    margin-top: -4px; /* Inline images have a slight offset for some reason when positioned using vertical-align */
    max-width: 100%;
    max-height: 100%;
    display: inline-block;
    vertical-align: middle;
    border: 0; /* Remove border on images enclosed in anchors in Internet Explorer */
}

/* Extras */

.picture-frame
{
    padding: 5px;
}

.frame
{
    border:1px solid black;
}

<p>32px</p>
<a href="#" class="picture-frame px32 frame">
    <img src="http://i.imgur.com/lesa2wS.png"/>
</a>
<a href="#" class="picture-frame px32 frame">
    <img src="http://i.imgur.com/kFMJxdZ.png"/>
</a>
<a href="#" class="picture-frame px32 frame">
    <img src="http://i.imgur.com/BDabZj0.png"/>
</a>
<p>125px</p>
<a href="#" class="picture-frame px125 frame">
    <img src="http://i.imgur.com/lesa2wS.png"/>
</a>
<a href="#" class="picture-frame px125 frame">
    <img src="http://i.imgur.com/kFMJxdZ.png"/>
</a>
<a href="#" class="picture-frame px125 frame">
    <img src="http://i.imgur.com/BDabZj0.png"/>
</a>

---

تحرير: محتمل مزيد من التحسن باستخدام JavaScript (صور الارتفاع):

function fixImage(img)
{
    var $this = $(img);
    var parent = $this.closest('.picture-frame');
    if ($this.width() == parent.width() || $this.height() == parent.height())
        return;

    if ($this.width() > $this.height())
        $this.css('width', parent.width() + 'px');
    else
        $this.css('height', parent.height() + 'px');
}

$('.picture-frame img:visible').each(function
{
    if (this.complete)
        fixImage(this);
    else
        this.onload = function(){ fixImage(this) };
});

Answer 20

كما أجاب هنا, ، تستطيع ايضا استخذام vh الوحدات بدلا من max-height: 100% إذا كان لا يعمل على متصفحك (مثل Chrome):

img {
    max-height: 75vh;
}

Answer 21

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

يرجى الخروج من إجابتي هنا:IE و Edge Fix for Object-Fit: Cover ؛

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

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

بمجرد أن يكون في الوسط ، أعطي للصورة ،

// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;

// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;

هذا يجعل الصورة تحصل على تأثير لكائن: تغطية.

---

هنا مظاهرة للمنطق أعلاه.

https://jsfiddle.net/furqan_694/s3xle1gp/

هذا المنطق يعمل في جميع المتصفحات.

Answer 22

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

1. قم بتطبيق تصميم CSS على حاوية الصور (على سبيل المثال ،u003Cimg> )
2. اضبط خاصية العرض على البعد الذي تريده
   • للأبعاد ، والاستخدام % للحجم النسبي ، أو التلقائي (استنادًا إلى حاوية الصورة أو العرض)
   • يستخدم px (أو غيرها) لبعد ثابت ، أو تعيين بُعد
3. قم بتعيين خاصية الارتفاع للضبط تلقائيًا ، بناءً على العرض
4. التمتع!

فمثلا،

<img style="width:100%; height:auto;"
    src="https://googledrive.com/host/0BwDx0R31u6sYY1hPWnZrencxb1k/thanksgiving.png"
/>

Answer 23

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

اكتب هذه الإعلانات داخل الخاص بك DIV المحدد:

width: 8.33% /* Or whatever percentage you want your div to take */
max-height: anyValueYouWant /* (In px or %) */

ثم ضع هذه الإعلانات داخل IMG المحدد:

width: "100%" /* Obligatory */
max-height: anyValueYouWant /* (In px or %) */

مهم جدا:

قيمة ال maxHeight يجب أن يكون نفس لكل من DIV و IMG المختارون.

Answer 24

لقد أصلحت هذه المشكلة باستخدام الكود التالي:

<div class="container"><img src="image_url" /></div>

.container {
    height: 75px;
    width: 75px;
}

.container img {
    object-fit: cover;
    object-position: top;
    display: block;
    height: 100%;
    width: 100%;
}

Answer 25

الحل البسيط هو استخدام FlexBox. حدد CSS للحاوية إلى:

.container{
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    overflow: hidden;
    /* Any custom height */
}

اضبط عرض الصورة الموجود إلى 100 ٪ ويجب أن تحصل على صورة مركزية لطيفة في الحاوية مع الأبعاد المحفوظة.

Answer 26

إذا كنت تستخدم bootstrap ، فأنت بحاجة فقط إلى إضافة ملف img-responsive الفصل إلى img بطاقة شعار:

<img class="img-responsive" src="img_chania.jpg" alt="Chania">

صور bootstrap

Answer 27

الحل سهل مع القليل من الرياضيات ...

فقط ضع الصورة في Div ثم في ملف HTML حيث تحدد الصورة. اضبط قيم العرض والارتفاع في النسب المئوية باستخدام قيم البكسل للصورة لحساب النسبة الدقيقة للعرض إلى الارتفاع.

على سبيل المثال ، لنفترض أن لديك صورة لها 200 بكسل وارتفاع 160 بكسل. يمكنك أن تقول بأمان أن قيمة العرض ستكون 100 ٪ ، لأنها القيمة الأكبر. لحساب قيمة الارتفاع ، يمكنك ببساطة تقسيم الارتفاع على العرض الذي يعطي قيمة النسبة المئوية 80 ٪. في الكود سيبدو مثل هذا ...

<div class="image_holder_div">
    <img src="some_pic.png" width="100%" height="80%">
</div>

Answer 28

تحقق من إجابتي ، اجعل صورة تستجيب - أبسط طريقة -

img{
    width: 100%;
    max-width: 800px;
}

Answer 29

أبسط طريقة للقيام بذلك هي باستخدام object-fit:

<div class="container">
  <img src="path/to/image.jpg">
</div>

.container{
   height: 300px;
}

.container img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}

إذا كنت تستخدم bootstrap ، فقط أضف img-responsive الفصل والتغيير إلى

.container img{
    object-fit: cover;
}

Answer 30

أو يمكنك ببساطة استخدام:

background-position:center;
background-size:cover;

الآن سوف تأخذ الصورة كل مساحة Div.