ฉันจะใส่รูปภาพ (img) ภายใน div และคงอัตราส่วนไว้ได้อย่างไร

ฉันมี 48x48 div และข้างในนั้นมีองค์ประกอบ img ฉันต้องการให้พอดีกับ div โดยไม่สูญเสียส่วนใดในเวลาที่อัตราส่วนถูกเก็บไว้มันสามารถทำได้โดยใช้ html และ css หรือไม่?

คุณจะต้องมี JavaScript เพื่อป้องกันการครอบตัดหากคุณไม่ทราบขนาดของรูปภาพในขณะที่คุณเขียน css

HTML & JavaScript

<div id="container">
    <img src="something.jpg" alt="" />
</div>

<script type="text/javascript">
(function() {

var img = document.getElementById('container').firstChild;
img.onload = function() {
    if(img.height > img.width) {
        img.height = '100%';
        img.width = 'auto';
    }
};

}());
</script>

CSS

#container {
   width: 48px;
   height: 48px;
}

#container img {
   width: 100%;
}

หากคุณใช้ไลบรารี JavaScript คุณอาจต้องการใช้ประโยชน์จากมัน

ใช้max-height:100%; max-width:100%;สำหรับภาพภายใน div

น่าเสียดายที่ความกว้างสูงสุด + ความสูงสูงสุดไม่ครอบคลุมงานของฉันอย่างเต็มที่ ... ดังนั้นฉันจึงได้พบวิธีแก้ไขปัญหาอื่น:

หากต้องการบันทึกอัตราส่วนภาพในขณะที่ปรับขนาดคุณสามารถใช้object-fitCSS3 propperty

บทความที่มีประโยชน์: การควบคุมอัตราส่วนภาพด้วย CSS3

img {
    width: 100%; /* or any custom size */
    height: 100%; 
    object-fit: contain;
}

ข่าวร้าย: ไม่รองรับ IE ( ฉันสามารถใช้งานได้ )

ใช้ CSS เท่านั้น:

div > img {
  width: auto;
  height : auto;
  max-height: 100%;
  max-width: 100%;
}

HTML

<div>
    <img src="something.jpg" alt="" />
</div>

CSS

div {
   width: 48px;
   height: 48px;
}

div img {
   display: block;
   width: 100%;
}

สิ่งนี้จะทำให้ภาพขยายเพื่อเติมเต็มพาเรนต์ซึ่งมีการตั้งขนาดในdivCSS

ฉันมีปัญหามากมายในการทำงานนี้ทุกวิธีแก้ปัญหาที่ฉันพบไม่ทำงาน

ฉันรู้ว่าฉันต้องตั้งค่าการแสดง div ให้ยืดหยุ่นดังนั้นโดยทั่วไปนี่คือ CSS ของฉัน:

div{
display: flex;
}

div img{ 
max-height: 100%;
max-width: 100%;
}

ลอง CSS:

img {
  object-fit: cover;
  height: 48px;
}

สำหรับฉันแล้ว CSS ต่อไปนี้ใช้งานได้ (ทดสอบใน Chrome, Firefox และ Safari)

มีหลายสิ่งที่ทำงานร่วมกัน:

• max-height: 100%;, max-width: 100%;และheight: auto;,width: auto;ทำให้ img ขนาดไปแล้วแต่จำนวนใดมิติต้นน้ำแรก 100% ขณะที่การรักษาอัตราส่วน
• position: relative;ในภาชนะและposition: absolute;ในเด็กร่วมกับtop: 50%;และleft: 50%;ศูนย์ด้านบนซ้ายมุม img ในภาชนะ
• transform: translate(-50%, -50%); ย้าย img กลับไปทางซ้ายและด้านบนโดยครึ่งหนึ่งของขนาดจึงอยู่ตรงกลางของ img ในคอนเทนเนอร์

CSS:

.container {
    height: 48px;
    width: 48px;

    position: relative;
}

.container > img {
    max-height: 100%;
    max-width: 100%;
    height: auto;
    width: auto;

    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
}

การตั้งค่ารูปภาพเป็นภาพพื้นหลังจะช่วยให้เราควบคุมขนาดและตำแหน่งได้มากขึ้นโดยออกจากแท็ก img เพื่อตอบสนองวัตถุประสงค์ที่แตกต่าง ...

ด้านล่างหากเราต้องการให้ div เป็นอัตราส่วนเดียวกันกับภาพถ่ายตัวยึดตำแหน่งจะเป็นภาพโปร่งใสขนาดเล็กที่มีอัตราส่วนกว้างยาวเท่ากับ photo.jpg หากภาพถ่ายเป็นสี่เหลี่ยมจัตุรัสแสดงว่าเป็นตัวยึดตำแหน่ง 1px x 1px หากภาพถ่ายนั้นเป็นภาพขนาดย่อของวิดีโอจะเป็นตัวยึด 16x9 เป็นต้น

เฉพาะคำถามใช้ตัวยึด 1x1 เพื่อรักษาอัตราส่วนกำลังสองของ div โดยใช้ภาพพื้นหลังbackground-sizeเพื่อรักษาอัตราส่วนภาพของภาพ

ฉันใช้background-position: center center;เพื่อให้ภาพจะอยู่กึ่งกลางใน div (การจัดแนวภาพถ่ายที่กึ่งกลางแนวตั้งหรือด้านล่างจะน่าเกลียดด้วยรูปถ่ายในแท็ก img)

div {
    background: url(photo.jpg) center center no-repeat;
    background-size: contain;
    width: 48px; // or a % in responsive layout
}
img {
    width: 100%;
}

<div><img src="placeholder.png"/></div>

เพื่อหลีกเลี่ยงการร้องขอ http พิเศษแปลงภาพตัวยึดเพื่อข้อมูล: URL

<img src="data:image/png;base64,..."/>

คุณสามารถใช้ระดับ"img ของเหลว"สำหรับรุ่นใหม่เช่นเงินทุน v4

และสามารถใช้ระดับ"img ตอบสนอง"สำหรับรุ่นเก่าเช่นBootstrap v3

การใช้งาน : -

แท็กimgด้วย: -

class = "img- ของเหลว"

src = "... "

นี่คือวิธีการของ JavaScript ทั้งหมด มันปรับขนาดภาพทีละน้อยจนพอดี คุณเลือกว่าจะย่อขนาดมันแต่ละครั้งที่ล้มเหลว ตัวอย่างนี้ย่อขนาดลง 10% ทุกครั้งที่ล้มเหลว:

let fit = function (el, w, h, percentage, step)
{
    let newH = h;
    let newW = w;

    // fail safe
    if (percentage < 0 || step < 0) return { h: h, w: w };
    if (h > w)
    {
        newH = el.height() * percentage;
        newW = (w / h) * newH;
        if (newW > el.width())
        {
            return fit(el, w, h, percentage - step, step);
        }
    }
    else
    {
        newW = el.width() * percentage;
        newH = (h / w) * newW;
        if (newH > el.height())
        {
            return fit(el, w, h, percentage - step, step);
        }
    }

    return { h: newH, w: newW };
};

img.bind('load', function ()
{
    let h = img.height();
    let w = img.width();
    let newFit = fit($('<img-wrapper-selector>'), w, h, 1, 0.1);

    img.width(newFit.w);
    img.height(newFit.h);
});

รู้สึกฟรีเพื่อคัดลอกและวางโดยตรง

สิ่งที่ทำงานให้ฉันคือ:

<div style='display: inline-flex; width: 80px; height: 80px;'>
<img style='max-width: 100%; max-height: 100%' src='image file'>
</div>

จำเป็นต้องมีอินไลน์เฟล็กซ์เพื่อป้องกันไม่ให้ภาพออกไปนอก div