[Html] كيف أقوم بتغيير حجم الصورة تلقائيًا لتلائم حاوية div


Answers

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

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

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

سوف تفعل العمل. انها الاشياء CSS3.

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

Question

كيف يمكنك تغيير حجم صورة كبيرة تلقائيًا بحيث تتلاءم مع حاوية عرض أصغر بحجم ثابت مع الحفاظ على نسبة العرض إلى الارتفاع؟

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




الأعمال التالية مثالية بالنسبة لي:

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



في ما يلي الحل الذي سيحقق محاذاة رأسية وأفقية داخل div بدون أي امتداد حتى إذا كانت الصورة المزودة صغيرة جدًا أو كبيرة جدًا بحيث لا تتناسب مع div. أتش تي أم أل:

<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;
}

The JQuery:

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

آمل أن يساعدك هذا على الخروج




لا تعمل الإجابة المقبولة من 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 ، لديك max-width = 400/4 = 100 و max-height = 200/4 = 50
3 / حل بديل هو تعيين أقصى عرض و max-height بنسبة 25٪ ، بل هو أبسط




يجب عليك إخبار المتصفح عن ارتفاع المكان الذي تضعه فيه.

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



تحقق من حل بلدي: http://codepen.io/petethepig/pen/dvFsA

مكتوب بلغة CSS خالصة ، بدون أي شفرة JS. يمكنه التعامل مع صور بأي حجم وأي اتجاه.

مع هذا 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;
}



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

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

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




اختراق جميل

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

  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>

قم بتشغيله here

ولكن يجب على المرء أن يستخدم علامة img لوضع الصور كما هو أفضل من background-image حيث SEO كما يمكنك كتابة الكلمة في alt من علامة img . هنا يمكنك جعل الصورة مستجيبة.

  1. عندما تكون الصورة بعلامة 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>

قم بتشغيله here




حدد الطول والعرض اللذين تحتاجهما لصورتك إلى div الذي يحتوي على العلامة <img>. لا تنسى إعطاء الارتفاع / العرض في علامة الأنماط المناسبة. في العلامة <img> ، اعطِ أقصى ارتفاع و max-width 100٪.

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

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




أبسط طريقة للقيام بذلك هو

باستخدام ملائمة الكائن

<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;
    }



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

img {
    max-height: 75vh;
}



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

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

الاستعمال:

HTML

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

JS

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



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

#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;
}

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

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