ฉันทำงานกับภาพและฉันพบปัญหาอัตราส่วนภาพ

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

การทำเช่นนี้จะทำให้รูปภาพเล็กลงถ้ามันใหญ่เกินไปสำหรับพื้นที่ที่ระบุ (เนื่องจากข้อเสียมันจะไม่ขยายภาพ)

ฉันต่อสู้กับปัญหานี้ค่อนข้างยากและในที่สุดก็มาถึงวิธีแก้ปัญหาง่ายๆนี้:

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

คุณสามารถปรับความกว้างและความสูงเพื่อให้เหมาะกับความต้องการของคุณและคุณสมบัติที่พอดีกับวัตถุจะทำการครอบตัดสำหรับคุณ

ไชโย

การแก้ปัญหาด้านล่างจะช่วยให้การปรับขนาดขึ้นและลดขนาดของภาพขึ้นอยู่กับความกว้างของกล่องหลัก

ภาพทุกภาพที่มีภาชนะผู้ปกครองที่มีความกว้างคงที่เพื่อการโฆษณาเท่านั้น ในการผลิตนี่จะเป็นความกว้างของกล่องหลัก

แนวปฏิบัติที่ดีที่สุด (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%

คุณสมบัติขนาดพื้นหลังคือ> = 9 เท่านั้น แต่ถ้าเป็นสิ่งที่ดีกับคุณคุณสามารถใช้ div ด้วยbackground-imageและตั้งค่าbackground-size: contain:

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

ตอนนี้คุณสามารถตั้งค่าขนาด div ของคุณเป็นสิ่งที่คุณต้องการและไม่เพียง แต่ภาพจะรักษาอัตราส่วนของภาพมันจะถูกรวมศูนย์ทั้งแนวตั้งและแนวนอนภายใน div อย่าลืมตั้งค่าขนาดใน css เนื่องจาก divs ไม่มีแอตทริบิวต์ width / height ในแท็กเอง

วิธีนี้แตกต่างจากคำตอบ setecs การใช้พื้นที่ภาพนี้จะคงที่และกำหนดโดยคุณ (เว้นช่องว่างทั้งแนวนอนหรือแนวตั้งขึ้นอยู่กับขนาด div และอัตราส่วนภาพ) ในขณะที่ setecs คำตอบคุณจะได้รับกล่องที่ ขนาดของภาพที่ปรับขนาด (ไม่มีช่องว่าง)

แก้ไข: ตามเอกสารขนาดพื้นหลัง MDNคุณสามารถจำลองคุณสมบัติขนาดพื้นหลังใน IE8 โดยใช้การประกาศตัวกรองที่เป็นกรรมสิทธิ์:

แม้ว่า Internet Explorer 8 ไม่รองรับคุณสมบัติขนาดพื้นหลัง แต่เป็นไปได้ที่จะเลียนแบบการทำงานบางอย่างโดยใช้ฟังก์ชัน -ms-filter ที่ไม่ได้มาตรฐาน:

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

คล้ายกับคำตอบบางอย่างที่นี่ แต่ในกรณีของฉันฉันมีภาพที่บางครั้งสูงกว่าบางครั้งก็ใหญ่กว่า

สไตล์นี้ใช้งานได้อย่างมีเสน่ห์เพื่อให้แน่ใจว่าภาพทั้งหมดใช้พื้นที่ที่มีอยู่ทั้งหมดรักษาอัตราส่วนและไม่ตัด:

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

ลบคุณสมบัติ "height"

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

เมื่อระบุทั้งสองอย่างคุณกำลังเปลี่ยนอัตราส่วนภาพ เพียงตั้งค่าหนึ่งจะปรับขนาด แต่คงไว้ซึ่งอัตราส่วนภาพ

เป็นทางเลือกเพื่อ จำกัด การใช้งาน oversizings:

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

เพียงเพิ่มส่วนนี้ลงใน css ของคุณมันจะย่อและขยายโดยอัตโนมัติด้วยการรักษาอัตราส่วนเดิม

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

ไม่มีวิธีมาตรฐานในการรักษาอัตราส่วนสำหรับภาพที่มีคือwidth, heightและmax-widthระบุร่วม

ดังนั้นเราจึงถูกบังคับให้ระบุwidthและheightเพื่อป้องกันหน้า“ ข้าม” ระหว่างการโหลดรูปภาพหรือเพื่อใช้max-widthและไม่ระบุขนาดสำหรับรูปภาพ

widthโดยheightทั่วไปการระบุเพียง(โดยไม่) ไม่สมเหตุสมผล แต่คุณสามารถลองแทนที่heightHTML-attribute ได้โดยเพิ่มกฎที่ชอบIMG {height: auto; }ลงในสไตล์ชีทของคุณ

เห็นแล้วยัง Firefox ที่เกี่ยวข้องกับข้อผิดพลาด 392261

นี่คือทางออก:

img {
   width: 100%;
   height: auto;
   object-fit: cover;
}

สิ่งนี้จะช่วยให้แน่ใจว่าภาพจะครอบคลุมผู้ปกครองทั้งหมดเสมอ (ปรับขนาดขึ้นและลง) และคงอัตราส่วนภาพไว้เหมือนเดิม

ตั้งค่าคลาส CSS ของแท็กคอนเทนเนอร์รูปภาพของคุณเป็นimage-class:

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

และเพิ่ม CSS สไตล์ชีทของคุณ

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

เพื่อรักษาภาพที่ตอบสนองได้ในขณะที่ยังคงบังคับใช้รูปภาพให้มีอัตราส่วนกว้างยาวที่แน่นอนคุณสามารถทำสิ่งต่อไปนี้:

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 นี้เพื่อดูอัตราส่วนเพิ่มเติมและตัวอย่างการทำงาน

ในการบังคับให้ภาพมีขนาดที่พอดีคุณไม่จำเป็นต้องเขียนรหัสมากเกินไป มันง่ายมาก

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/stackoverflow/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เพื่อจัดกึ่งกลางของภาพ

ฉันยังแสดงความคิดเห็นส่วนใหญ่ของเทคนิคภายในซอ

ฉันยังค้นหาวิธีอื่นที่จะทำให้สิ่งนี้เกิดขึ้น จะไม่มีภาพจริงใน 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 { 
    width: 500px; 
    height: 600px; 
    object-fit: contain; 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
}

คุณสามารถสร้าง 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

ฉันขอแนะนำวิธีการตอบสนองแนวทางปฏิบัติที่ดีที่สุดคือการใช้หน่วย Viewportและแอตทริบิวต์ min / max ดังนี้

img{
  display: block;
  width: 12vw;
  height:12vw;
  max-width:100%;
  min-width:100px;
  min-height:100px;
  object-fit:contain;
}

การทำเช่นนี้จะทำให้รูปภาพเล็กลงถ้ามันใหญ่เกินไปสำหรับพื้นที่ที่ระบุ (เนื่องจากข้อเสียมันจะไม่ขยายภาพ)

การแก้ปัญหาโดย setec นั้นใช้ได้สำหรับ "ลดขนาดให้พอดี" ในโหมดอัตโนมัติ แต่หากต้องการขยายให้พอดีในโหมด 'อัตโนมัติ' คุณจะต้องใส่ภาพที่ได้รับลงใน temp id ก่อนตรวจสอบว่าสามารถขยายได้ในความสูงหรือความกว้าง (ขึ้นอยู่กับอัตราส่วนของ v / s บล็อกที่แสดงของคุณ)

$(".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");
});

วิธีการนี้มีประโยชน์เมื่อภาพที่ได้รับมีขนาดเล็กกว่ากล่องแสดงผล คุณต้องบันทึกไว้ในเซิร์ฟเวอร์ของคุณในขนาดเล็กดั้งเดิมแทนที่จะเป็นรุ่นที่ขยายเพื่อกรอกกล่องแสดงผลที่ใหญ่กว่าของคุณเพื่อประหยัดขนาดและแบนด์วิดท์

วิธีการเกี่ยวกับการใช้องค์ประกอบปลอมสำหรับการจัดตำแหน่งแนวตั้ง? รหัสที่น้อยกว่านี้สำหรับม้าหมุน แต่ฉันเดาว่ามันใช้ได้กับภาชนะทุกขนาดคงที่ มันจะทำให้อัตราส่วนกว้างยาวและใส่ @ แถบสีเทาเข้มที่ด้านบน / ล่างหรือซ้าย / เขียนสำหรับมิติที่สั้นที่สุด ในขณะที่ภาพอยู่กึ่งกลางแนวนอนโดยจัดข้อความและแนวตั้งโดยองค์ประกอบหลอก

    > 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[data-attribute] {height: 100vh;}

โปรดทราบว่าหากความสูงของพอร์ตการดูมากกว่าภาพภาพจะลดลงตามธรรมชาติเมื่อเทียบกับความแตกต่าง

ในที่สุดฉันก็คิดว่านี่เป็นทางออกที่ดีที่สุดง่ายและเรียบง่าย :

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