คุณปรับขนาดภาพขนาดใหญ่โดยอัตโนมัติอย่างไรเพื่อให้พอดีกับคอนเทนเนอร์ div ความกว้างขนาดเล็กลงในขณะที่ยังคงอัตราส่วนความกว้าง: ความสูง

ตัวอย่าง: stackoverflow.com - เมื่อภาพถูกแทรกลงบนแผงแก้ไขและภาพมีขนาดใหญ่เกินไปที่จะพอดีกับหน้าภาพจะถูกปรับขนาดโดยอัตโนมัติ

อย่าใช้ความกว้างหรือความสูงที่ชัดเจนกับแท็กรูปภาพ ให้มัน:

max-width:100%;
max-height:100%;

นอกจากนี้height: auto;หากคุณต้องการระบุความกว้างเท่านั้น

ตัวอย่าง: 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>

วัตถุพอดี

ดูเหมือนจะมีวิธีอื่นในการทำเช่นนี้

<img style='height: 100%; width: 100%; object-fit: contain'/>

จะทำผลงาน มันคือ CSS 3

ซอ: http://jsfiddle.net/mbHB4/7364/

ขณะนี้ยังไม่มีวิธีการทำอย่างถูกต้องในแบบกำหนดรูปแบบด้วยรูปภาพขนาดคงที่เช่นไฟล์ JPEG หรือ PNG

ปรับขนาดภาพตามสัดส่วน, คุณจะต้องตั้งทั้งสูงหรือความกว้างที่ "100%" แต่ไม่ใช่ทั้งสอง หากคุณตั้งค่าเป็น "100%" ภาพของคุณจะยืดออก

การเลือกว่าจะทำความสูงหรือความกว้างขึ้นอยู่กับภาพและขนาดภาชนะของคุณ:

1. หากรูปภาพและคอนเทนเนอร์ของคุณมีทั้ง "รูปแนวตั้ง" หรือทั้งสอง "รูปทรงแนวนอน" (สูงกว่ากว้างหรือกว้างกว่าที่สูงกว่าตามลำดับ) ก็ไม่สำคัญว่าความสูงหรือความกว้างจะเป็นเท่าใด "% 100" .
2. หากภาพของคุณเป็นแนวตั้งและที่เก็บของคุณเป็นแนวนอนคุณต้องตั้งค่าheight="100%"บนภาพ
3. หากรูปภาพของคุณเป็นแนวนอนและคอนเทนเนอร์ของคุณเป็นแนวตั้งคุณต้องตั้งค่าwidth="100%"บนภาพ

หากรูปภาพของคุณเป็น SVG ซึ่งเป็นรูปแบบภาพเวกเตอร์ขนาดผันแปรคุณสามารถมีส่วนขยายให้พอดีกับคอนเทนเนอร์เกิดขึ้นโดยอัตโนมัติ

คุณเพียงแค่ต้องแน่ใจว่าไฟล์ SVG ไม่มีคุณสมบัติเหล่านี้ตั้งอยู่ใน<svg>แท็ก:

height
width
viewbox

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

นี่คือวิธีการแก้ปัญหาที่จะจัดแนว img และแนวนอนของคุณภายใน div โดยไม่ยืดออกแม้ว่าภาพที่ให้มาจะเล็กหรือใหญ่เกินไปที่จะใส่ใน div

เนื้อหา HTML:

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

ส่วน jQuery:

var logoHeight = $('#myDiv img').height();
    if (logoHeight < 104) {
        var margintop = (104 - logoHeight) / 2;
        $('#myDiv img').css('margin-top', margintop);
    }

ทำให้มันง่าย!

ให้ภาชนะที่คงที่ heightแล้วสำหรับimgแท็กอยู่ข้างในชุดและwidthmax-height

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

ความแตกต่างคือการที่คุณตั้งค่าwidthให้เป็น 100% max-widthไม่ได้

แฮ็คที่สวยงาม

คุณมีสองวิธีในการทำให้ภาพตอบสนอง

1. เมื่อภาพนั้นเป็นภาพพื้นหลัง

#container{
    width: 300px;
    height: 300px;
    background-image: url(http://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

<div id="container"><div>

เรียกใช้ที่นี่

2. เมื่อภาพอยู่ในimgแท็ก

#container{
    max-width: 400px;
    overflow: hidden;
}
img{
    width: 100%;
    object-fit: contain;
}

<div id="container">
   <img src="http://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg" alt="your_keyword"/>
<div>

เรียกใช้ที่นี่

คุณสามารถตั้งค่ารูปภาพเป็นพื้นหลังเป็น div จากนั้นใช้คุณสมบัติขนาดพื้นหลัง CSS :

background-size: cover;

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

ลองดูโซลูชันของฉัน: http://codepen.io/petethepig/pen/dvFsA

มันเขียนใน CSS ที่บริสุทธิ์โดยไม่มีโค้ด JavaScript ใด ๆ มันสามารถจัดการกับภาพทุกขนาดและทิศทางใดก็ได้

รับ HTML ดังกล่าว:

<div class="image">
  <div class="trick"></div>
  <img src="http://placekitten.com/415/200"/>
</div>

รหัส CSS จะเป็น:

.image {
  font-size: 0;
  text-align: center;
  width: 200px;  /* Container's dimensions */
  height: 150px;
}
img {
  display: inline-block;
  vertical-align: middle;
  max-height: 100%;
  max-width: 100%;
}
.trick {
  display: inline-block;
  vertical-align: middle;
  height: 150px;
}

ฉันเพิ่งเผยแพร่ปลั๊กอิน 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>

JavaScript

$(function() {
    $("img.scale").imageScale();
});

วิธีการแก้ปัญหานี้ไม่ได้ยืดภาพและเติมภาชนะทั้งหมด แต่มันตัดภาพบางส่วน

HTML:

 <div><img src="/images/image.png"></div>

CSS:

div {
    width: 100%;
    height: 10em;
    overflow: hidden;

img {
    min-width: 100%;
    min-height: 100%;
}

ฉันเห็นว่าหลายคนได้แนะนำการเลือกวัตถุซึ่งเป็นตัวเลือกที่ดี แต่ถ้าคุณต้องการให้มันทำงานในเบราว์เซอร์รุ่นเก่าได้เช่นกันก็มีวิธีอื่นที่ทำได้ง่าย

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

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

เมื่ออยู่ตรงกลางฉันจะให้ภาพนั้น

// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;

// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;

สิ่งนี้ทำให้ภาพได้รับผลกระทบจาก Object-fit: cover

นี่คือการสาธิตของตรรกะข้างต้น

https://jsfiddle.net/furqan_694/s3xLe1gp/

ตรรกะนี้ใช้ได้กับทุกเบราว์เซอร์

ผลงานต่อไปนี้สมบูรณ์แบบสำหรับฉัน:

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

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

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

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

ให้ความสูงและความกว้างที่คุณต้องการสำหรับภาพของคุณให้กับ div ที่มีแท็ก <img> อย่าลืมที่จะให้ความสูง / ความกว้างในแท็กสไตล์ที่เหมาะสม

ในแท็ก <img> ให้max-heightและmax-widthเป็น 100%

<div style="height:750px; width:700px;">
    <img alt="That Image" style="max-height:100%; max-width:100%;" src="">
</div>

คุณสามารถเพิ่มรายละเอียดในชั้นเรียนที่เหมาะสมหลังจากที่คุณทำถูกต้อง

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>

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

คุณต้องบอกความสูงของตำแหน่งที่คุณวางเบราว์เซอร์:

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

แก้ไข:การวางตำแหน่งรูปภาพตามตารางก่อนหน้ามีปัญหาใน Internet Explorer 11 ( max-heightไม่ทำงานในdisplay:tableองค์ประกอบ) ฉันได้แทนที่ด้วยการวางตำแหน่งแบบอินไลน์ซึ่งไม่เพียงทำงานได้ดีทั้งใน Internet Explorer 7 และ Internet Explorer 11 แต่ยังต้องใช้รหัสน้อย

นี่คือเรื่องของฉันในเรื่อง มันจะใช้งานได้ถ้าคอนเทนเนอร์มีขนาดที่ระบุ ( 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 images enclosed in anchors in Internet Explorer */
}

และในรูปแบบ HTML:

<a href="#" class="picture-frame px125">
    <img src="http://i.imgur.com/lesa2wS.png"/>
</a>

การสาธิต

/* 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 images enclosed in anchors in Internet Explorer */
}

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

แก้ไข: การปรับปรุงเพิ่มเติมที่เป็นไปได้โดยใช้ JavaScript (อัปสเกลภาพ):

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

ฉันแก้ไขปัญหานี้โดยใช้รหัสต่อไปนี้:

<div class="container"><img src="image_url" /></div>

.container {
    height: 75px;
    width: 75px;
}

.container img {
    object-fit: cover;
    object-position: top;
    display: block;
    height: 100%;
    width: 100%;
}

ตามที่ได้รับคำตอบไว้ที่นี่คุณสามารถใช้vhหน่วยแทนได้max-height: 100%หากไม่สามารถใช้งานบนเบราว์เซอร์ของคุณ (เช่น Chrome):

img {
    max-height: 75vh;
}

ฉันจัดกึ่งกลางและปรับสัดส่วนรูปภาพภายในไฮเปอร์ลิงก์ทั้งในแนวนอนและแนวตั้งด้วยวิธีนี้:

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

มีการทดสอบใน Internet Explorer, Firefox และ Safari

ข้อมูลเพิ่มเติมเกี่ยวกับตรงกลางเป็นที่นี่

คำตอบที่ได้รับการยอมรับจาก Thorn007ไม่ทำงานเมื่อภาพมีขนาดเล็กเกินไป

เพื่อแก้ปัญหานี้ฉันเพิ่มปัจจัยระดับ ด้วยวิธีนี้มันทำให้รูปภาพใหญ่ขึ้นและเติม div 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 คุณจะมีความกว้างสูงสุด = 400/4 = 100 และความสูงสูงสุด = 200/4 = 50
3. โซลูชันทางเลือกคือการตั้งค่าความกว้างสูงสุดและความสูงสูงสุดที่ 25% มันง่ายยิ่งขึ้น

หากคุณใช้ Bootstrap คุณเพียงแค่เพิ่มimg-responsiveคลาสในimgแท็ก:

<img class="img-responsive" src="img_chania.jpg" alt="Chania">

บูตรูปภาพ

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

1. ใช้สไตล์ CSS กับคอนเทนเนอร์รูปภาพ (ตัวอย่างเช่น <img>)
2. ตั้งค่าคุณสมบัติความกว้างเป็นขนาดที่คุณต้องการ
   • สำหรับมิติใช้%สำหรับขนาดสัมพัทธ์หรือการปรับสเกลอัตโนมัติ (ขึ้นอยู่กับคอนเทนเนอร์รูปภาพหรือจอแสดงผล)
   • ใช้px(หรืออื่น ๆ ) สำหรับสแตติกหรือตั้งค่ามิติ
3. ตั้งค่าคุณสมบัติความสูงเพื่อปรับโดยอัตโนมัติตามความกว้าง
4. สนุก!

ตัวอย่างเช่น,

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

ทุกคำตอบให้รวมถึงหนึ่งที่ได้รับการยอมรับในการทำงานเพียงภายใต้สมมติฐานที่ว่า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ตัวเลือก

ทางออกที่ง่ายคือการใช้ flexbox กำหนด CSS ของคอนเทนเนอร์ไปที่:

.container{
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    overflow: hidden;
    /* Any custom height */
}

ปรับความกว้างของรูปภาพที่มีอยู่เป็น 100% และคุณควรได้ภาพที่ดีที่อยู่ตรงกลางในคอนเทนเนอร์โดยมีขนาดที่สงวนไว้

การแก้ปัญหาเป็นเรื่องง่ายด้วยวิชาคณิตศาสตร์ ...

เพียงแค่ใส่ภาพใน div แล้วในไฟล์ HTML ที่คุณระบุภาพ ตั้งค่าความกว้างและความสูงเป็นเปอร์เซ็นต์โดยใช้ค่าพิกเซลของภาพเพื่อคำนวณอัตราส่วนที่แน่นอนของความกว้างต่อความสูง

ตัวอย่างเช่นสมมติว่าคุณมีรูปภาพที่มีความกว้าง 200 พิกเซลและสูง 160 พิกเซล คุณสามารถพูดได้อย่างปลอดภัยว่าค่าความกว้างจะเป็น 100% เพราะเป็นค่าที่มากกว่า ในการคำนวณค่าความสูงคุณเพียงแค่หารความสูงด้วยความกว้างซึ่งให้ค่าเปอร์เซ็นต์เป็น 80% ในรหัสมันจะมีลักษณะเช่นนี้ ...

<div class="image_holder_div">
    <img src="some_pic.png" width="100%" height="80%">
</div>

วิธีที่ง่ายที่สุดในการทำเช่นนี้คือโดยใช้object-fit:

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

ตรวจสอบคำตอบของฉันสร้างภาพตอบสนอง - วิธีที่ง่ายที่สุด -

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

หรือคุณสามารถใช้:

background-position:center;
background-size:cover;

ตอนนี้ภาพจะใช้พื้นที่ทั้งหมดของ div