ฉันจะเติม div ให้กับรูปภาพโดยที่ยังคงสัดส่วนได้อย่างไร

ฉันพบกระทู้นี้ - คุณจะยืดรูปภาพเพื่อเติม <div> ได้อย่างไรในขณะที่รักษาอัตราส่วนของรูปภาพ - นั่นไม่ใช่สิ่งที่ฉันต้องการทั้งหมด

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

ดังนั้นหากรูปภาพเป็นแนวตั้งฉันต้องการwidthให้เป็นแบบนั้น100%และheight:autoเพื่อให้มันคงสัดส่วน หากรูปภาพเป็นแนวนอนฉันต้องการheightให้เป็น100%และwidth to beอัตโนมัติ " ฟังดูซับซ้อนใช่มั้ย?

<div class="container">
   <img src="some-image.jpg" alt="Could be portrait or landscape"/>
</div>

เนื่องจากฉันไม่รู้ว่าจะทำอย่างไรฉันจึงสร้างภาพสั้น ๆ ว่าฉันหมายถึงอะไร ฉันอธิบายไม่ถูกด้วยซ้ำ

ดังนั้นฉันเดาว่าฉันไม่ใช่คนแรกที่ถามเรื่องนี้ อย่างไรก็ตามฉันไม่สามารถหาวิธีแก้ปัญหานี้ได้ อาจจะมีวิธีใหม่ของ CSS3 ในการทำสิ่งนี้ - ฉันกำลังคิดถึง flex-box ความคิดใด ๆ ? บางทีมันอาจจะง่ายกว่าที่ฉันคาดไว้?

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

.fill {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}
.fill img {
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%
}

<div class="fill">
    <img src="https://lorempizza.com/320/240" alt="" />
</div>

JSFiddle ที่นี่

ฉันทดสอบสิ่งนี้สำเร็จแล้วใน IE9, Chrome 31 และ Opera 18 แต่ไม่มีการทดสอบเบราว์เซอร์อื่น เช่นเคยคุณต้องพิจารณาข้อกำหนดการสนับสนุนเฉพาะของคุณ

มันสายไปหน่อย แต่ฉันเพิ่งมีปัญหาเดียวกันและในที่สุดก็แก้ไขได้ด้วยความช่วยเหลือของโพสต์ stackoverflow อื่น ( https://stackoverflow.com/a/29103071 )

.img {
   object-fit: cover;
   width: 50px;
   height: 100px;
}

หวังว่านี่จะยังช่วยใครได้บ้าง

Ps: ยังทำงานร่วมกับคุณสมบัติ css max-height , max-width , min-widthและmin-height มีประโยชน์อย่างยิ่งกับการใช้หน่วยความยาวเช่น100%หรือ100vh / 100vwเพื่อเติมคอนเทนเนอร์หรือหน้าต่างเบราว์เซอร์ทั้งหมด

คำถามเก่า แต่สมควรได้รับการอัปเดตเนื่องจากตอนนี้มีวิธี

คำตอบที่ถูกต้องตาม CSS คือการใช้งานที่ทำงานเช่นobject-fit: cover background-size: coverการจัดตำแหน่งจะได้รับการดูแลโดยobject-positionแอตทริบิวต์ซึ่งค่าเริ่มต้นจะอยู่ตรงกลาง

แต่ไม่มีการรองรับในเบราว์เซอร์ IE / Edge ใด ๆ หรือ Android <4.4.4 นอกจากนี้object-positionSafari, iOS หรือ OSX ยังไม่รองรับ มีโพลีฟิลล์อยู่ดูเหมือนว่าวัตถุพอดีจะให้การสนับสนุนที่ดีที่สุด

สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับวิธีการทำงานของคุณสมบัติโปรดดูบทความเคล็ดลับ CSSobject-fitสำหรับคำอธิบายและการสาธิต

สิ่งนี้ควรทำ:

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

คำตอบทั้งหมดด้านล่างมีความกว้างและความสูงคงที่ซึ่งทำให้โซลูชัน "ไม่ตอบสนอง"

เพื่อให้ได้ผลลัพธ์ แต่คงการตอบสนองของภาพฉันใช้ดังต่อไปนี้:

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

HTML:

<div class="container">
    <img style="background-image: url("https://i.imgur.com/XOmNCwY.jpg");" src="img/blank.gif">
</div> 


.container img{
   width: 100%;
   height: auto;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
}​

คุณสามารถทำได้โดยใช้คุณสมบัติ css flex โปรดดูรหัสด้านล่าง

.img-container {
  border: 2px solid red;
  justify-content: center;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  
}
.img-container .img-to-fit {
  flex: 1;
  height: 100%;
}

<div class="img-container">
  <img class="img-to-fit" src="https://images.pexels.com/photos/8633/nature-tree-green-pine.jpg" />
</div>

พิจารณาใช้background-size: cover(IE9 +) ร่วมกับbackground-image. สำหรับ IE8- มีpolyfill

ลองสิ่งนี้:

img {
  position: relative;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translateX(-50%);
}

หวังว่านี่จะช่วยได้

คุณสามารถใช้ div เพื่อบรรลุสิ่งนี้ ไม่มีแท็ก img :) หวังว่านี่จะช่วยได้

.img{
	width:100px;
	height:100px;
	background-image:url('http://www.mandalas.com/mandala/htdocs/images/Lrg_image_Pages/Flowers/Large_Orange_Lotus_8.jpg');
	background-repeat:no-repeat;
	background-position:center center;
	border:1px solid red;
	background-size:cover;
}
.img1{
	width:100px;
	height:100px;
	background-image:url('https://images.freeimages.com/images/large-previews/9a4/large-pumpkin-1387927.jpg');
	background-repeat:no-repeat;
	background-position:center center;
	border:1px solid red;
	background-size:cover;
}

<div class="img">	
</div>
<div class="img1">	
</div>

วิธีเดียวที่ฉันจะบรรลุสถานการณ์ "กรณีที่ดีที่สุด" ที่อธิบายไว้คือการวางภาพเป็นพื้นหลัง:

<div class="container"></div>​

.container {
    width: 150px;
    height: 100px;
    background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}​

นี่คือคำตอบพร้อมรองรับการใช้ IE object-fitดังนั้นคุณจะไม่สูญเสียอัตราส่วน

ใช้ JS ง่ายในการตรวจสอบข้อมูลโค้ดถ้า object-fitได้รับการสนับสนุนแล้วแทนที่imgสำหรับsvg

//for browsers which doesn't support object-fit (you can use babel to transpile to ES5)

if ('objectFit' in document.documentElement.style === false) {
  document.addEventListener('DOMContentLoaded', () => {
    Array.prototype.forEach.call(document.querySelectorAll('img[data-object-fit]'), image => {
      (image.runtimeStyle || image.style).background = `url("${image.src}") no-repeat 50%/${image.currentStyle ? image.currentStyle['object-fit'] : image.getAttribute('data-object-fit')}`
      image.src = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${image.width}' height='${image.height}'%3E%3C/svg%3E`
    })
  })
}

img {
  display: inline-flex;
  width: 175px;
  height: 175px;
  margin-right: 10px;
  border: 1px solid red
}

/*for browsers which support object fit */

[data-object-fit='cover'] {
  object-fit: cover
}

[data-object-fit='contain'] {
  object-fit: contain
}

<img data-object-fit='cover' src='//picsum.photos/1200/600' />
<img data-object-fit='contain' src='//picsum.photos/1200/600' />
<img src='//picsum.photos/1200/600' />

หมายเหตุ:นอกจากนี้ยังมีโพลีฟิลล์บางส่วนobject-fitที่จะทำobject-fitงานได้

นี่คือตัวอย่างบางส่วน:

• วัตถุพอดีภาพ
• คอนสแตนซ์เชน / วัตถุพอดี - ฟิลล์
• Polyfill สำหรับคุณสมบัติ CSS object-fit

คุณมีตัวอย่างการทำงานของฉันที่นี่ ฉันใช้เคล็ดลับที่ตั้งค่ารูปภาพเป็นพื้นหลังของคอนเทนเนอร์ div ด้วย background-size: cover and background-position: center center

ฉันวางภาพด้วยความกว้าง: 100% และความทึบ: 0 ทำให้มองไม่เห็น โปรดทราบว่าฉันแสดงภาพของฉันเพียงเพราะฉันมีความสนใจเป็นพิเศษในการเรียกเหตุการณ์คลิกของเด็ก

โปรดทราบว่าฉันกำลังใช้เชิงมุมมันไม่เกี่ยวข้องโดยสิ้นเชิง

<div class="foto-item" ng-style="{'background-image':'url('+foto.path+')'}">
    <img class="materialboxed" ng-class="foto.picid" ng-src="{{foto.path}}" style="opacity: 0;filter: alpha(opacity=0);" width="100%" onclick="$('.materialboxed')/>
 </div>
<style>
.foto-item {
height: 75% !important;
width: 100%;
position: absolute;
top: 0;
left: 0;
overflow:hidden;
background-size: cover;
background-position: center center;
}
</style>

ผลลัพธ์คือผลลัพธ์ที่คุณกำหนดว่าเหมาะสมที่สุดในทุกกรณี

ตอนนี้ค่าCSS object-fit: coverและobject-position: left centerคุณสมบัติช่วยแก้ปัญหานี้ได้

เพียงแก้ไขความสูงของรูปภาพและระบุ width = auto

img{
    height: 95vh;
    width: auto;
}