如何在没有媒体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的情况下制作图像缩放比例

回答

相关问题