CSS: ความกว้างหรือความสูง 100% ในขณะที่รักษาอัตราส่วนไว้หรือไม่

ปัจจุบันด้วยสไตล์ฉันสามารถใช้width: 100%และautoความสูง (หรือกลับกัน) แต่ฉันยังไม่สามารถ จำกัด รูปภาพในตำแหน่งที่ระบุไม่ว่ากว้างหรือสูงเกินไปตามลำดับ

ความคิดใด ๆ

หากคุณกำหนดเพียงมิติเดียวบนภาพอัตราส่วนภาพจะถูกรักษาไว้เสมอ

เป็นปัญหาที่ภาพใหญ่กว่า / สูงกว่าที่คุณต้องการหรือไม่?

คุณสามารถวางไว้ใน DIV ที่ตั้งไว้ที่ความสูง / ความกว้างสูงสุดที่คุณต้องการสำหรับรูปภาพแล้วตั้งค่าล้น: ซ่อน สิ่งนั้นจะครอบตัดอะไรเกินกว่าที่คุณต้องการ

หากภาพมีความกว้างและความสูง 100%: อัตโนมัติและคุณคิดว่าภาพนั้นสูงเกินไปนั่นเป็นเพราะสัดส่วนภาพถูกรักษาไว้ คุณจะต้องครอบตัดหรือเปลี่ยนอัตราส่วน

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

--- แก้ไขตามข้อเสนอแนะ ---

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

หลายปีต่อมาเมื่อมองหาความต้องการเดียวกันฉันพบตัวเลือก CSS โดยใช้ขนาดพื้นหลัง

มันควรจะทำงานในเบราว์เซอร์ที่ทันสมัย ​​(IE9 +)

<div id="container" style="background-image:url(myimage.png)">
</div>

และสไตล์:

#container
{
  width:  100px; /*or 70%, or what you want*/
  height: 200px; /*or 70%, or what you want*/
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

การอ้างอิง: http://www.w3schools.com/cssref/css3_pr_background-size.asp

และตัวอย่าง: http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size

โดยการตั้งค่าmax-widthคุณสมบัติCSS 100%เป็นรูปภาพจะเติมความกว้างขององค์ประกอบการเป็นพาเรนต์ แต่จะไม่ทำให้มีขนาดใหญ่กว่าขนาดจริงเพื่อรักษาความละเอียด

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

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

วิธีการทำงานที่เรียบง่ายสง่างาม:

img {
  width: 600px;  /*width of parent container*/
  height: 350px; /*height of parent container*/
  object-fit: contain;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

มีปัญหาเดียวกัน ปัญหาสำหรับฉันก็คือคุณสมบัติความสูงได้กำหนดไว้แล้วที่อื่นแก้ไขมันเช่นนี้:

.img{
    max-width: 100%;
    max-height: 100%;
    height: inherit !important;
}

วิธีแก้ปัญหาง่าย ๆ :

min-height: 100%;
min-width: 100%;
width: auto;
height: auto;
margin: 0;
padding: 0;

อย่างไรก็ตามถ้าคุณต้องการจัดกึ่งกลางในคอนเทนเนอร์ div หลักคุณสามารถเพิ่มคุณสมบัติ css เหล่านั้น:

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

มันควรจะทำงานได้ตามที่คาดหวังจริงๆ :)

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

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

สมมุติว่าคุณมีตู้คอนเทนเนอร์ที่ตอบสนองได้ดี แต่มันมีขอบเขตที่กำหนดไว้อย่างดีสำหรับความกว้างและความสูงและต่ำสุด

.photo {
  max-width: 150px;
  min-width: 75px;
  max-height: 150px;
  min-height: 75px;
}

และคอนเทนเนอร์นั้นมี img ที่ต้องระวังพิกเซลของความสูงของคอนเทนเนอร์เพื่อหลีกเลี่ยงการรับภาพที่สูงมากซึ่งล้นหรือถูกครอบตัด

img ควรกำหนดความกว้างสูงสุด 100% ก่อนเพื่อให้สามารถแสดงผลความกว้างที่เล็กกว่าและสองเป็นเปอร์เซ็นต์ตามซึ่งทำให้เป็นพารามิเตอร์

.photo > img {
  max-width: 100%;
  max-height: 150px;
  -webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,1);
  -moz-box-shadow:    0 0 13px 3px rgba(0,0,0,1);
  box-shadow:         0 0 13px 3px rgba(0,0,0,1);
}

โปรดทราบว่ามีเงาดี;)

เพลิดเพลินไปกับตัวอย่างสดที่ซอนี้: http://jsfiddle.net/pligor/gx8qthqL/2/

ฉันใช้สิ่งนี้กับภาชนะสี่เหลี่ยมที่มีความสูงและความกว้างคงที่ แต่มีภาพที่มีขนาดต่างกัน

img {
  max-width: 95%;
  max-height: 15em;
  width: auto !important;
}

เป็นการดีที่สุดที่จะใช้รถยนต์ในมิติที่ควรเคารพอัตราส่วน หากคุณไม่ได้ตั้งค่าคุณสมบัติอื่นเป็นอัตโนมัติเบราว์เซอร์ส่วนใหญ่ในปัจจุบันจะคิดว่าคุณต้องการเคารพสัดส่วนภาพ แต่ไม่ใช่ทั้งหมด (IE10 บน windows phone 8 ไม่มีตัวอย่างเช่น)

width: 100%;
height: auto;

นี่เป็นคำตอบที่ตรงไปตรงมามากที่ฉันคิดขึ้นหลังจากทำตามลิงค์ของ conca และดูขนาดพื้นหลัง มันจะเป่าภาพขึ้นแล้วนำมันไปวางไว้ที่กึ่งกลางของคอนเทนเนอร์ด้านนอกโดยไม่มีการปรับขนาด

<style>
#cropcontainer
{
  width:  100%; 
  height: 100%; 
  background-size: 140%;
  background-position: center;
  background-repeat: no-repeat;
}
</style>

<div id="cropcontainer" style="background-image: url(yoururl); />

เพื่อไม่ให้กลายเป็นปัญหาเก่า แต่ ...

#container img {
      max-width:100%;
      height:auto !important;
}

แม้ว่าสิ่งนี้จะไม่เหมาะสมเมื่อคุณใช้! override สำคัญในความสูงหากคุณใช้ CMS เช่น WordPress ที่ตั้งค่าความสูงและความกว้างสำหรับคุณ

ปัจจุบันหนึ่งสามารถใช้vwและvhหน่วยซึ่งเป็นตัวแทน 1% ของวี iewport ของW idth และเอชแปดตามลำดับ

https://css-tricks.com/fun-viewport-units/

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

img {
  max-width: 100vw;
  max-height: 100vh;
}

... จะทำให้ภาพกว้างที่สุดเท่าที่จะเป็นไปได้รักษาอัตราส่วนภาพ แต่ไม่กว้างกว่าหรือสูงกว่า 100% ของวิวพอร์ต

ใช้ JQuery หรือ CSS เนื่องจาก CSS เป็นความเข้าใจผิดโดยทั่วไป (คำถามและการอภิปรายนับไม่ถ้วนที่นี่เกี่ยวกับเป้าหมายการออกแบบที่เรียบง่ายแสดงให้เห็นว่า)

มันเป็นไปไม่ได้ที่ CSS จะทำสิ่งที่คุณต้องการ: ภาพจะมีความกว้าง 100% แต่ถ้าความกว้างนี้ส่งผลให้มีความสูงที่ใหญ่เกินไปให้ใช้ความสูงสูงสุด - และแน่นอนว่าสัดส่วนที่ถูกต้องจะเป็น ดอง

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

background-repeat: repeat-x;
background-position: top;
background-size:auto;
background-attachment: fixed;

วิวัฒนาการดิจิตอลกำลังมา