weschool - www w3schools com html5




كيف أقوم بتغيير حجم الصورة تلقائيًا لتلائم حاوية div (18)

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

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


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

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

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

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

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

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


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

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

التحقق من بلدي الجواب https://.com/a/36712112/2439715

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

تحقق من حل بلدي: 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 ببساطة

   div.headerimg1 {
       position: absolute;
       top: 290px;
       left: 81px;
       width: 389px;
            height: 349px;
}
<div class="headerimg1">
<img src="" style="max-height:100%;height:auto;width:100%;max-width:100%;margin:auto;
display:inline;"></div>

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

اكتب هذه الإعلانات داخل محدد 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 .


حدد الطول والعرض اللذين تحتاجهما لصورتك إلى 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 بدون أي امتداد حتى إذا كانت الصورة المزودة صغيرة جدًا أو كبيرة جدًا بحيث لا تتناسب مع 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);
    }

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


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

#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 .


لا تعمل الإجابة المقبولة من 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٪ ، بل هو أبسط


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

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

مثال: 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>


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

/* 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>

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


لقد قمت للتو بنشر المساعد 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();
});

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

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

يمكنك تعيين الصورة كخلفية لـ div ، ثم استخدم خاصية css background-size

background-size: cover;

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


اختراق جميل

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

  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


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

هنا هي وجهة نظري حول هذا الموضوع. ستعمل فقط إذا كان للحاوية حجم محدد (لا يبدو أن 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 imgs enclosed in anchors in IE */
}

وفي HTML:

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

DEMO

/* 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 imgs enclosed in anchors in IE */
}

/* 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>

تحرير: ممكن تحسين مزيد من استخدام JS (صور الارتقاء):

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






autoresize