html w3school - كيف أقوم بتغيير حجم الصورة تلقائيًا لتلائم حاوية div




weschool code (23)

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

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


Answers

تعريف 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>

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

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

فمثلا

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

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

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

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

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

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

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

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


تحرير: كان لتحديد موضع الصورة على أساس الجدول السابق مشكلات في 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) };
});

اجعله بسيط!

اعطِ الحاوية ارتفاعًا ثابتًا ، ومن ثم لعلامة img بداخله ، قم بتعيين width والحد max-height .

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

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


في ما يلي الحل الذي سيحقق محاذاة رأسية وأفقية داخل 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);
    }

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


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

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

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

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>



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

background-size: cover;

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


تم اقتباس الشفرة أدناه من أعلى واختبرت بواسطتي باستخدام صورة تسمى 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>

حدد الطول والعرض اللذين تحتاجهما لصورتك إلى 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>

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


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


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

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

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

يعتمد اختيار إجراء الارتفاع أو العرض على أبعاد الصورة والحاوية:

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

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

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

height
width
viewbox

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


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

img {
    max-height: 75vh;
}

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

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

جميع الإجابات المقدمة ، بما في ذلك الإجابة المقبولة ، تعمل فقط تحت افتراض أن غلاف 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 .


لدي حل أفضل بكثير دون الحاجة إلى أي 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>

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


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

على سبيل المثال ، يمكنك الاطلاع على هذا الرابط والمقتطف أدناه:

div#outer {
  height: 120px;
  background-color: red;
}

div#inner {
  width: 50%;
  height: 100%;
  background-color: green;
  margin: 0 auto;
  text-align: center; /* For text alignment to center horizontally. */
  line-height: 120px; /* For text alignment to center vertically. */
}
<div id="outer" style="width:100%;">
  <div id="inner">Foo foo</div>
</div>

إذا كان لديك الكثير من الأطفال ضمن أحد الوالدين ، فيجب أن يكون محتوى CSS الخاص بك مثل هذا المثال على الكمان .

يبدو مظهر محتوى HTML كما يلي:

<div id="outer" style="width:100%;">
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> Foo Text </div>
</div>

ثم انظر هذا المثال على الكمان .





html css image autoresize