ฉันต้องทำให้ภาพนี้ขยายขนาดสูงสุดเท่าที่จะเป็นไปได้โดยไม่ทำให้ภาพใหญ่เกินไป<div>หรือบิดเบือนภาพ

ฉันไม่สามารถคาดการณ์อัตราส่วนภาพของภาพได้ดังนั้นจึงไม่มีทางรู้ว่าจะใช้:

<img src="url" style="width: 100%;">

หรือ

<img src="url" style="height: 100%;">

ฉันไม่สามารถใช้ทั้งสอง (เช่น style = "width: 100%; ความสูง: 100%;") <div>เพราะที่จะขยายภาพให้พอดีกับ

<div>มีขนาดที่กำหนดโดยร้อยละของหน้าจอซึ่งยังเป็นที่คาดเดาไม่ได้

อัปเดตปี 2559:

เบราว์เซอร์สมัยใหม่ทำงานได้ดีขึ้นมาก สิ่งที่คุณต้องทำคือตั้งค่าความกว้างของภาพเป็น 100% ( สาธิต )

.container img {
   width: 100%;
}

เนื่องจากคุณไม่ทราบอัตราส่วนกว้างยาวคุณจะต้องใช้สคริปต์บางอย่าง นี่คือวิธีที่ฉันจะทำกับ jQuery ( ตัวอย่าง ):

CSS

.container {
    width: 40%;
    height: 40%;
    background: #444;
    margin: 0 auto;
}
.container img.wide {
    max-width: 100%;
    max-height: 100%;
    height: auto;
}
.container img.tall {
    max-height: 100%;
    max-width: 100%;
    width: auto;
}​

HTML

<div class="container">
 <img src="http://i48.tinypic.com/wrltuc.jpg" />
</div>
<br />
<br />
<div class="container">
 <img src="http://i47.tinypic.com/i1bek8.jpg" />
</div>

ต้นฉบับ

$(window).load(function(){
 $('.container').find('img').each(function(){
  var imgClass = (this.width/this.height > 1) ? 'wide' : 'tall';
  $(this).addClass(imgClass);
 })
})

มีวิธีที่ง่ายกว่ามากในการทำสิ่งนี้โดยใช้เพียงCSSและHTML:

HTML:

<div class="fill"></div>

CSS:

.fill {
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-image: url('path/to/image.jpg');
}

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

ไม่ใช่โซลูชันที่สมบูรณ์แบบ แต่ CSS นี้อาจช่วยได้ การย่อ / ขยายเป็นสิ่งที่ทำให้โค้ดนี้ทำงานได้และปัจจัยในทางทฤษฎีจะไม่มีที่สิ้นสุดที่จะทำงานได้อย่างยอดเยี่ยมสำหรับภาพขนาดเล็ก

#myImage {
    zoom: 2;  //increase if you have very small images

    display: block;
    margin: auto;

    height: auto;
    max-height: 100%;

    width: auto;
    max-width: 100%;
}

background-size: coverหากคุณสามารถใช้ภาพพื้นหลังและชุด สิ่งนี้จะทำให้พื้นหลังครอบคลุมองค์ประกอบทั้งหมด

CSS

div {
  background-image: url(path/to/your/image.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

หากคุณติดกับการใช้ภาพอินไลน์มีตัวเลือกน้อย อย่างแรกคือ

วัตถุพอดี

สถานที่แห่งนี้ทำหน้าที่ในภาพวิดีโอและวัตถุอื่น ๆ background-size: coverที่คล้ายกับ

CSS

img {
  object-fit: cover;
}

น่าเสียดายที่การสนับสนุนเบราว์เซอร์ไม่ค่อยดีนักกับ IE จนถึงเวอร์ชัน 11 ไม่สนับสนุนเลย ตัวเลือกถัดไปใช้ jQuery

CSS + jQuery

HTML

<div>
  <img src="image.png" class="cover-image">
</div>

CSS

div {
  height: 8em;
  width: 15em;
}

ปลั๊กอิน jQuery ที่กำหนดเอง

(function ($) {
  $.fn.coverImage = function(contain) {
    this.each(function() {
      var $this = $(this),
        src = $this.get(0).src,
        $wrapper = $this.parent();

      if (contain) {
        $wrapper.css({
          'background': 'url(' + src + ') 50% 50%/contain no-repeat'
        });
      } else {
        $wrapper.css({
          'background': 'url(' + src + ') 50% 50%/cover no-repeat'
        });
      }

      $this.remove();
    });

    return this;
  };
})(jQuery);

ใช้ปลั๊กอินเช่นนี้

jQuery('.cover-image').coverImage();

มันจะถ่ายภาพตั้งเป็นภาพพื้นหลังในองค์ประกอบ wrapper ของภาพและลบimgแท็กออกจากเอกสาร สุดท้ายคุณสามารถใช้

CSS บริสุทธิ์

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

CSS

div {
  height: 8em;
  width: 15em;
  overflow: hidden;
}

div img {
  min-height: 100%;
  min-width: 100%;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  display: block;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

หวังว่านี้จะช่วยให้ใครสักคนมีความสุขการเข้ารหัส!

ขอบคุณ CSS3

img
{
   object-fit: contain;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

IE และ EDGE เป็นบุคคลภายนอกเสมอ: http://caniuse.com/#feat=object-fit

อัปเดต 2019

ตอนนี้คุณสามารถใช้object-fitคุณสมบัติ css ที่ยอมรับค่าต่อไปนี้:fill | contain | cover | none | scale-down

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

ตัวอย่างเช่นคุณอาจมีที่เก็บภาพ

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

.container {
    height: 50px;
    width: 50%;

.container_img {
    height: 100%;
    width: 100%;
    object-fit: cover;

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

$(function() {
    $(window).resize(function() {
        var $i = $('img#image_to_resize');
        var $c = $img.parent();
        var i_ar = $i.width() / $i.height(), c_ar = $c.width() / $c.height();            
        $i.width(i_ar > c_ar ? $c.width() : $c.height() * (i_ar));
    });
    $(window).resize();
});

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

นี่ไม่ได้พยายามจัดกึ่งกลางของภาพในคอนเทนเนอร์นั่นอาจเป็นไปได้ แต่ฉันเดาว่าไม่ใช่สิ่งที่คุณต้องการ

ตั้งค่าความกว้างและความสูงของcontainerdiv ภายนอก จากนั้นใช้สไตล์ด้านล่างใน img:

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

สิ่งนี้จะช่วยให้คุณรักษาอัตราส่วนของ img

หากคุณต้องการตั้งค่าความกว้างหรือความสูงสูงสุด (เพื่อไม่ให้มีขนาดใหญ่มาก) ในขณะที่รักษาอัตราส่วนภาพคุณสามารถทำได้ดังนี้:

img{
   object-fit: contain;
   max-height: 70px;
}

ฉันเจอคำถามนี้เพื่อค้นหาปัญหาที่คล้ายกัน ฉันกำลังสร้างเว็บเพจด้วยการออกแบบที่ตอบสนองได้และความกว้างขององค์ประกอบที่วางไว้บนหน้านั้นถูกตั้งค่าเป็นเปอร์เซ็นต์ของความกว้างของหน้าจอ ความสูงถูกตั้งค่าด้วยค่า vw

เนื่องจากฉันกำลังเพิ่มโพสต์ด้วย PHP และแบ็กเอนด์ฐานข้อมูล CSS ล้วนๆไม่เป็นที่ต้องการ อย่างไรก็ตามฉันหาวิธีแก้ปัญหา jQuery / javascript ได้เล็กน้อย troblesome ดังนั้นฉันจึงคิดวิธีแก้ปัญหา (อย่างน้อยฉันก็คิดว่าตัวเองเป็นอย่างน้อย)

HTML (หรือ php)

div.imgfill {
  float: left;
  position: relative;
  background-repeat: no-repeat;
  background-position: 50%  50%;
  background-size: cover;
  width: 33.333%;
  height: 18vw;
  border: 1px solid black; /*frame of the image*/
  margin: -1px;
}

<div class="imgfill" style="background-image:url(source/image.jpg);">
  This might be some info
</div>
<div class="imgfill" style="background-image:url(source/image2.jpg);">
  This might be some info
</div>
<div class="imgfill" style="background-image:url(source/image3.jpg);">
  This might be some info
</div>

ด้วยการใช้ style = "" มันเป็นไปได้ที่จะให้ PHP อัปเดตหน้าเว็บของฉันแบบไดนามิกและ CSS -styling พร้อมกับ style = "" จะจบลงด้วยภาพที่ครอบคลุมสมบูรณ์แบบ

คุณสามารถใช้object-fit: cover;กับ div parent

https://css-tricks.com/almanac/properties/o/object-fit/

ที่จะทำให้ยืดภาพนี้ไปขนาดสูงสุดที่เป็นไปได้โดยไม่ต้องล้นมันหรือบิดเบือนภาพ

สมัคร ...

img {
  object-fit: cover;
  height: -webkit-fill-available;
}

สไตล์กับภาพ

ใช้วิธีนี้คุณสามารถกรอก div ของคุณด้วยอัตราส่วนภาพและ divs ที่แตกต่างกันของภาพ

jQuery:

$(window).load(function(){
   $('body').find(.fillme).each(function(){
      var fillmeval = $(this).width()/$(this).height();
      var imgval = $this.children('img').width()/$this.children('img').height();
      var imgClass;
      if(imgval > fillmeval){
          imgClass = "stretchy";
      }else{
          imgClass = "stretchx";
      }
      $(this).children('img').addClass(imgClass);
   });
});

HTML:

<div class="fillme">
   <img src="../images/myimg.jpg" />
</div>

CSS:

.fillme{
  overflow:hidden;
}
.fillme img.stretchx{
  height:auto;
  width:100%;
}
.fillme img.stretchy{
  height:100%;
  width:auto;
}

นี้ได้เคล็ดลับสำหรับฉัน

div img {
    width: 100%;
    min-height: 500px;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}

ถ้าคุณทำงานกับแท็ก IMG มันเป็นเรื่องง่าย

ฉันทำสิ่งนี้:

<style>
        #pic{
            height: 400px;
            width: 400px;
        }
        #pic img{
            height: 225px;               
            position: relative;
            margin: 0 auto;
        }
</style>

<div id="pic"><img src="images/menu.png"></div>

$(document).ready(function(){
            $('#pic img').attr({ 'style':'height:25%; display:none; left:100px; top:100px;' })
)}

แต่ฉันไม่พบวิธีทำให้มันใช้งานได้กับ #pic {background: url (img / menu.png)} Enyone? ขอบคุณ

ฉันมีปัญหาที่คล้ายกัน ฉันแก้ไขมันด้วยCSSเท่านั้น

โดยทั่วไปObject-fit: coverจะช่วยให้คุณบรรลุภารกิจในการรักษาอัตราส่วนภาพในขณะที่จัดตำแหน่งภาพภายใน div

แต่ปัญหาObject-fit: coverไม่ได้ทำงานใน IE และใช้ความกว้าง 100% และความสูง 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/

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

HTML:

<style>
#foo, #bar{
    width: 50px; /* use any width or height */
    height: 50px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
</style>

<div id="foo" style="background-image: url('path/to/image1.png');">
<div id="bar" style="background-image: url('path/to/image2.png');">

JSFiddle

... และหากคุณต้องการตั้งค่าหรือเปลี่ยนภาพ (ใช้ #foo เป็นตัวอย่าง):

jQuery:

$("#foo").css("background-image", "url('path/to/image.png')");

JavaScript:

document.getElementById("foo").style.backgroundImage = "url('path/to/image.png')";

โซลูชันจำนวนมากที่พบที่นี่มีข้อ จำกัด บางอย่าง: บางอันไม่ทำงานใน IE (object-fit) หรือเบราว์เซอร์รุ่นเก่าโซลูชันอื่น ๆ ไม่ขยายขนาดภาพ (ลดขนาดเท่านั้น) โซลูชันจำนวนมากไม่สนับสนุนการปรับขนาดของหน้าต่าง ไม่ใช่แบบทั่วไปอาจต้องการความละเอียดของการแก้ไขหรือการจัดวาง (แนวตั้งหรือแนวนอน)

หากใช้ javascript และ jquery ไม่ใช่ปัญหาฉันมีวิธีแก้ปัญหานี้ตามรหัสของ @Tatu Ulmanen ฉันแก้ไขปัญหาบางอย่างและเพิ่มรหัสบางส่วนในกรณีที่ภาพโหลดแบบไดนามิกและไม่สามารถใช้งานได้ตั้งแต่เริ่มต้น โดยพื้นฐานแล้วความคิดคือการมีกฎ CSS ที่แตกต่างกันสองข้อและนำไปใช้เมื่อจำเป็น: หนึ่งเมื่อข้อ จำกัด คือความสูงดังนั้นเราต้องแสดงแถบสีดำที่ด้านข้างและกฎ CSS อื่น ๆ เมื่อข้อ จำกัด คือความกว้างดังนั้นเราต้อง แสดงแถบสีดำที่ด้านบน / ล่าง

function applyResizeCSS(){
    var $i = $('img#imageToResize');
    var $c = $i.parent();
    var i_ar = Oriwidth / Oriheight, c_ar = $c.width() / $c.height();  
    if(i_ar > c_ar){
        $i.css( "width","100%");
        $i.css( "height","auto");          
    }else{
        $i.css( "height","100%");
        $i.css( "width","auto");
    }
}   
var Oriwidth,Oriheight;
$(function() {
    $(window).resize(function() {
        applyResizeCSS();
    });

    $("#slide").load(function(){
        Oriwidth  = this.width,
        Oriheight = this.height; 
        applyResizeCSS();
    }); 

    $(window).resize();
}); 

สำหรับองค์ประกอบ HTML เช่น:

<img src="images/loading.gif" name="imageToResize" id="imageToResize"/>