सीएसएस पहलू अनुपात को फिट और बनाए रखने के लिए आप कैसे फैलते हैं?

Question

मैं निम्नलिखित सीएसएस है:

.mod.left { 
background-image: url("http://www.myimage.jpg"); 
display: block; 
height: 160px; 
overflow: hidden; 
width: 175px; 
} 

कि इस HTML से मेल खाती है:

<div class="mod left"></div> 

यह इस गंदगी में परिणाम:

अगर मैं css3 पृष्ठभूमि का उपयोग आकार: 175 पीएक्स 160 पीएक्स; पहलू अनुपात वास्तव में इस तरह एक गड़बड़ है, जिसके परिणामस्वरूप में गड़बड़ है:

वहाँ एक छवि को फैलाने के एक div फिट करने के लिए एक तरीका है? लेकिन जिस तरह से पहलू अनुपात बनाए रखा जाता है? मुझे एक ऑटो फसल चाहिए।

Answer 1

यह (ब्राउज़रों जो background-size समर्थन में) काम करना चाहिए:

background-size: 175px auto; 

आप भी आजमा सकते:

background-size: cover; 

या:

background-size: contain; 

There's a good explanation on MDC.

Answer 2

क्या इसे पृष्ठभूमि छवि होने की आवश्यकता है?

img{ 
width:300px; 
height:auto; 
} 


<img src="your-photo.png"> 

Answer 3

आप contain मूल्य के साथ background-size संपत्ति का उपयोग कर सकते हैं:

background-size: contain; 

यहाँ एक काम कर उदाहरण है: https://jsfiddle.net/gusrodriguez/auuk97hf/1/

उपरोक्त उदाहरण में, शरीर पृष्ठभूमि में एक तनी छवि है। इसके अलावा मनमानी आकार के साथ दो divs हैं, और एक और छवि के साथ जो पहलू अनुपात फिट बैठता है और रखता है।