假如有一天，你老板給你一些帥氣照片，他希望發(fā)布在公司自己網(wǎng)站上面，且希望能兼容其它端。 但2個月后，他在手機上打開網(wǎng)站，看到他的帥氣圖像被壓成一個小盒子，或者圖像被不成比例地壓扁，他略微生氣跟你(前端)說，給你半天的時間，立馬解決。如果解決不了，那在給你半天的時間。
對于剛入門的不久的前端小伙伴可能給他一個禮拜也解決不了，因為要兼容所有的端，這時候他要怎么辦呢？這里有一種方案，可以解決所有屏幕大小、所有卡片大小或任何其他用例上的問題，我們來看看這個萬能的方法。
默認行為
將圖像導入到我們的組件中，然后將其放在頁面上，下面是正常默認的情況：
在不同的視口上，圖片隨著屏幕的變化而變化。在不同的消費設備上有超過10,000種不同的屏幕尺寸。有小到360px寬的手機。有5k臺imac，也有 4k電視，這么多尺寸，我們要怎么去適配圖片呢？
把外圍容器的大小寫死怎么樣？
我們可以將圖片的包裹元素的大小寫死，如：
.img-container {
width: 700px;
height: 450px;
}.image{
width: 100%;
height: 100%
}
這會比剛開始的好的多了，圖像不再隨視口的大小進行縮放，視口變大的時候，圖片也只顯示外圍容器設置的大小。 但是，如果視口太小，則會切除圖像的底部。
另外，如果用戶使用的是大屏幕，則該圖像不會自動按比例放大或縮小，因此生成的設計中的圖像可能太大或太小。
css有一些內(nèi)置的特性來幫助我們
我們來試試另一種方法。不需要將圖像導入到組件中，直接在CSS文件中引用它：
background-image默認情況下不會將圖像縮小以適應div大小，因此我們只能看到圖像的左上角。
廣告
CSS選擇器世界(異步圖書出品)
作者：張鑫旭
京東
CSS 更多的內(nèi)置特性
在CSS中， 還有一些 background-image 相關的選項：
background-position: center
告訴瀏覽器將圖像居中放置在div上。
background-size: cover
這告訴瀏覽器自動將圖像縮小以適合div的大小。
假設圖片是從后臺過來的，那又要怎么做？
如果圖片是從遠程請求過來的，那我們可以使用內(nèi)聯(lián)樣式：
這樣也能完美用 css 的方法來解決圖片定位，大小的問題。
作者：Taylor Coon 譯者：前端小智 來源：medium
原文：https://medium.com/dev-genius/solve-your-image-sizing-and-positioning-problems-forever-7859e24118ce
