image تنسيق - تغيير حجم صورة CSS والحفاظ على نسبة العرض إلى الارتفاع




الصور في (15)

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 src="big_image.jpg" width="900" height="600" alt="" />

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

img {
  max-width:500px;
}

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


للحفاظ على صورة متجاوبة مع الاستمرار في فرض الصورة للحصول على نسبة عرض إلى ارتفاع معينة ، يمكنك إجراء ما يلي:

HTML:

<div class="ratio2-1">
   <img src="../image.png" alt="image">
</div>

و SCSS:

.ratio2-1 {
  overflow: hidden;
  position: relative;

  &:before {
    content: '';
    display: block;
    padding-top: 50%; // ratio 2:1
  }

  img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
}

يمكن استخدام هذا لفرض نسبة عرض إلى ارتفاع معينة ، بصرف النظر عن حجم الصورة التي يحمّلها المؤلفون.

بفضلKseso في http://codepen.io/Kseso/pen/bfdhg . تحقق من عنوان URL هذا للحصول على المزيد من النسب ومثالًا عمليًا.


خاصية حجم الخلفية هي>> 9 فقط ، ولكن إذا كان ذلك جيدًا معك ، فيمكنك استخدام div مع background-image background-size: contain وتعيين background-size: contain :

div.image{
    background-image: url("your/url/here");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

الآن يمكنك فقط تعيين حجم div الخاص بك إلى أي شيء تريده ، ولن يقتصر الأمر على إبقاء الصورة في نسبة العرض إلى الارتفاع الخاصة بها ، بل ستكون مركزية أيضًا عموديًا وأفقيًا داخل div. لا تنسَ تعيين الأحجام على css لأن div لا تحتوي على سمة width / height على العلامة نفسها.

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

تحرير: وفقًا لوثائق حجم خلفية MDN ، يمكنك محاكاة خاصية حجم الخلفية في IE8 باستخدام تعريف عامل تصفية خاص:

على الرغم من أن Internet Explorer 8 لا يدعم خاصية حجم الخلفية ، فمن الممكن محاكاة بعض وظائفه باستخدام وظيفة التصفية غير القياسية -ms:

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";

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


يمكنك إنشاء div مثل هذا:

<div class="image" style="background-image:url('/to/your/image')"></div>

واستخدم css في تصميمه:

height: 100%;
width: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: contain; // this can also be cover

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

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

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

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

img{
    width: 200px;
    height: auto;
    object-fit: contain; /* Fit logo in the image size */
        -o-object-fit: contain; /* Fit logo fro opera browser */
    object-position: top; /* Set logo position */
        -o-object-position: top; /* Logo position for opera browser */
    }
<img src="http://cdn.sstatic.net/Sites//company/img/logos/so/so-logo.png" alt="Logo">


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 src="big_image.jpg" width="900" alt=""/>

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

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

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

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

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

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

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


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

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

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

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

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

الحل من قبل 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 الخاص بك لتوفير حجمه وعرض النطاق الترددي.


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

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

أفضل الممارسات (2018):

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

.parent {
  width: 100px;
}

img {
  display: block;
  width: 100%;
  height: auto;
}
<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<div class="parent">
  <img width="400" height="400" src="https://placehold.it/400x400">
</div>

حل مربي:

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

.parent {
  width: 100px;
}

.container {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
  padding: 34.37% 0 0 0; /* 34.37% = 100 / (w / h) = 100 / (640 / 220) */
}

.container img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
<p>This image is originally 640x220, but should get resized by the CSS:</p>
<div class="parent">
  <div class="container">
    <img width="640" height="220" src="https://placehold.it/640x220">
  </div>
</div>

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

640px (w) = 100%
220px (h) = ?

640/220 = 2.909
100/2.909 = 34.37%

لذلك ، الحشو العلوي = 34.37٪.


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

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

إذا كنت ترغب في احتواء مربع داخل إطار العرض على العرض الرأسي أو العرض الأفقي (بحجم أكبر قدر ممكن ، ولكن لا يوجد شيء بالخارج) ، قم بالتبديل بين استخدام vw / vh على اتجاه / portrait landscape :

@media (orientation:portrait ) {
  .square {
    width :100vw;
    height:100vw;
  }
} 
@media (orientation:landscape) {
  .square {
    width :100vh;
    height:100vh;
  }
} 






css image aspect-ratio