如何在沒有媒體css的情況下製作圖像縮放比例

我對這個圖像的名字板塊（PAST CHAMPIONS）進行了瘟疫，除了iPhone肖像外，它在所有屏幕上看起來都很不錯，它似乎被切斷了。如何在沒有媒體css的情況下製作圖像縮放比例

無論如何，使這個規模沒有媒體的CSS？

這裏是主頁。 http://www51.myfantasyleague.com/2017/home/61106#0

原始代碼仍然在CSS

#championship_plaque h2 { 
    background: 
     rgba(0, 0, 0, 0) 
     url("http://dagrafixdesigns.com/Images/2008/DA_2017/DA_Pro16/plaquetitle_glass.png") 
     no-repeat 
     scroll 
     center center 
     !important; 
    border: 0 none; 
    margin-left: 25px; 
    text-indent: -9999px; 
}

嘗試這種代碼，沒有運氣

#championship_plaque h2 { 
    background: 
     rgba(0, 0, 0, 0) 
     url("http://dagrafixdesigns.com/Images/2008/DA_2017/DA_Pro16/plaquetitle_glass.png") 
     no-repeat 
     scroll 
     center center 
     !important; 
    background-position: 70% 0; 
    background-repeat: no-repeat; 
    background-size: cover; 
    padding-bottom: 20px; 
    padding-top: 20px; 
}

桌面：

手機：

我想我可以用媒體的呼叫切換到一個新的形象爲這個大小的屏幕，如果一切都失敗了，只是想看看它是否可以先做這樣。 thx

來源

2017-04-07 DA-G-GURU

有沒有理由反對'@media（）'查詢？ – Dai

在第二個示例中，您通過使用速記background屬性與!important重複屬性值，但之後立即覆蓋它們。當你想要清楚發生什麼時，我建議使用longhand屬性。

你想要的是background-size: contain - 自動downscales圖像，以便它在父容器100％可見。你也想去掉background-color: black：

這是規則我有一個對我的作品：

#championship_plaque h2 { 
    background-image: url("http://dagrafixdesigns.com/Images/2008/DA_2017/DA_Pro16/plaquetitle_glass.png"); 
    background-size: contain; 
    background-repeat: no-repeat; 
    background-position: center center; 
}

請注意，如果你想隱藏的文本還有比text-indent: -9999px一個更好的方法，而不是考慮使用這個組合：

user-select: none; 
color: #00000000; /* hex RRGGBBAA, AA=00 means 0% opacity, so the text is invisible */

來源

2017-04-07 23:04:51 Dai

嘿抱歉沒有發佈照片兄弟...不會再發生..所以我讓你的代碼工作，我可以使用媒體的CSS，但必須是另一種方式第一。所以我們很好，謝謝你。如果你把iPhone變成風景，我有這個流氓迷你鼠標比其他更高，我不能在電腦上覆制修復，你可以看看嗎？ [鏈接]（http://dagrafixdesigns.com/Images/2008/DA_2017/DA_RSkin/iphone.png） –

@ DA-G-GURU我建議使用CSS flexbox（'display：flex'）代替'display：內聯塊;'。 – Dai

好的將考慮到那撓性.....我認爲我現在將使用媒體CSS，因爲包含使圖像模糊...糟透了 –

如何在沒有媒體css的情況下製作圖像縮放比例

回答

相關問題