css - لعرض - مقاس خلفية صفحة الويب




تغيير حجم صورة CSS والحفاظ على نسبة العرض إلى الارتفاع (12)

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

<img src="big_image.jpg" width="900" height="600" alt="" />

كما ترى ، تم تحديد height width بالفعل. أضفت قاعدة CSS للصور:

img {
  max-width:500px;
}

ولكن بالنسبة إلى big_image.jpg ، أتلقى width=500 height=600 . كيف يمكنني ضبط حجم الصور ، مع الحفاظ على نسب العرض إلى الارتفاع.


أزل خاصية "الارتفاع".

<img src="big_image.jpg" width="900" alt=""/>

بتحديد كلاهما تقوم بتغيير نسبة العرض إلى الارتفاع للصورة. سيتم تغيير حجم الإعداد فقط مع الحفاظ على نسبة العرض إلى الارتفاع.

اختياريًا ، لتقييد زيادة الحجم:

<img src="big_image.jpg" width="900" alt="" style="max-width:500px; height:auto; max-height:600px;"/>

تشبه إلى حد كبير بعض الإجابات هنا ، ولكن في حالتي كان لدي صور كانت أحيانًا أطول ، وأحيانًا أكبر.

يعمل هذا الأسلوب مثل السحر للتأكد من أن جميع الصور تستخدم كل المساحة المتاحة ، والحفاظ على النسبة وليس التخفيضات:

.img {
   object-fit: contain;
   max-width: 100%;
   max-height: 100%;
   width: auto;
   height: auto;
}

سيؤدي هذا إلى تصغير الصورة إذا كانت كبيرة جدًا بالنسبة للمنطقة المحددة (على سبيل المثال ، لن يتم تكبير الصورة).

الحل من قبل setec على ما يرام "تقليص لائقا" في الوضع التلقائي. ولكن ، للتوسع على النحو الأمثل لتلائم وضع "تلقائي" ، يجب أولاً وضع الصورة المستلمة في معرف مؤقت ، تحقق مما إذا كان يمكن توسيعها في الارتفاع أو في العرض (حسب نسبة العرض إلى جانب نسبة العرض إلى الارتفاع في نسبة كتلة العرض الخاصة بك) ،

$(".temp_image").attr("src","str.jpg" ).load(function() { 
    // callback to get actual size of received image 

    // define to expand image in Height 
    if(($(".temp_image").height() / $(".temp_image").width()) > display_aspect_ratio ) {
        $(".image").css('height', max_height_of_box);
        $(".image").css('width',' auto');
    } else { 
        // define to expand image in Width
        $(".image").css('width' ,max_width_of_box);
        $(".image").css('height','auto');
    }
    //Finally put the image to Completely Fill the display area while maintaining aspect ratio.
    $(".image").attr("src","str.jpg");
});

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


قم بتعيين فئة CSS لعلامة حاوية الصور الخاصة بك إلى image-class :

<div class="image-full"></div>

وأضفه لك ورقة أنماط CSS.

.image-full {
    background: url(...some image...) no-repeat;
    background-size: cover;
    background-position: center center;
}

لا توجد طريقة قياسية للمحافظة على نسبة العرض إلى الارتفاع للصور ذات width height والحد max-width المحدد معًا.

لذلك نحن مضطرون إما إلى تحديد width height لمنع "قفزات" الصفحة أثناء تحميل الصور ، أو استخدام max-width وعدم تحديد أبعاد للصور.

عادةً ما لا يكون تحديد width فقط (بدون height ) منطقيًا ، ولكن يمكنك محاولة تجاوز سمة HTML height عن طريق إضافة قاعدة مثل IMG {height: auto; } IMG {height: auto; } في ورقة الأنماط الخاصة بك.

انظر أيضا ذات الصلة فايرفوكس علة 392261 .


لقد عانيت من هذه المشكلة بشدة ، ووصلت في نهاية المطاف إلى هذا الحل البسيط:

object-fit: cover;
width: 100%;
height: 250px;

يمكنك ضبط العرض والارتفاع لتلائم احتياجاتك ، وستقوم خاصية ملائمة الكائن بالقيام بعملية الاقتصاص.

في صحتك.


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

img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

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

    > li {
      float: left;
      overflow: hidden;
      background-color: @gray-dark;
      text-align: center;

      > a img,
      > img {
        display: inline-block;
        max-height: 100%;
        max-width: 100%;
        width: auto;
        height: auto;
        margin: auto;
        text-align: center;
      }

      // Add pseudo element for vertical alignment of inline (img)
      &:before {
        content: "";
        height: 100%;
        display: inline-block;
        vertical-align: middle;
      }
    }

يمكنك استخدام هذا:

img { 
    width: 500px; 
    height: 600px; 
    object-fit: contain; 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
}

https://jsfiddle.net/sot2qgj6/3/

هنا هو الجواب إذا كنت ترغب في وضع صورة مع نسبة ثابتة من العرض ، ولكن ليس بكسل ثابت من العرض .

وسيكون هذا مفيدًا عند التعامل مع حجم مختلف للشاشة .

الحيل هي

  1. باستخدام padding-top لضبط الارتفاع من العرض.
  2. باستخدام position: absolute لوضع الصورة في مساحة الحشو.
  3. استخدام max-height and max-width للتأكد من أن الصورة لن تكون فوق العنصر الأصل.
  4. باستخدام display:block and margin: auto to center the image.

لقد قمت أيضا بتعليق معظم الحيل داخل الكمان.

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

css بسيط باستخدام الخلفية http://jsfiddle.net/4660s79h/2/

صورة الخلفية مع كلمة في أعلى http://jsfiddle.net/4660s79h/1/

مفهوم لاستخدام الموقف المطلق من هنا http://www.w3schools.com/howto/howto_css_aspect_ratio.asp


img {
  display: block;
  max-width:230px;
  max-height:95px;
  width: auto;
  height: auto;
}
<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">

سيؤدي هذا إلى تصغير الصورة إذا كانت كبيرة جدًا بالنسبة للمنطقة المحددة (على سبيل المثال ، لن يتم تكبير الصورة).


img {
  max-width: 80px; /* Also works with percentage value like 100% */
  height: auto;
}
<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img width="400" height="400" src="https://i.stack.imgur.com/aEEkn.png">

<p>Let's say the author of the HTML deliberately wants
  the height to be half the value of the width,
  this CSS will ignore the HTML author's wishes, which may or may not be what you want:
</p>
<img width="400" height="200" src="https://i.stack.imgur.com/aEEkn.png">







aspect-ratio