Question

我不是编码员，但有一些基本知识，并且一直在编辑模板。该网站几乎就在那里 - 在桌面上它看起来很好但在移动设备上封面图像不会缩小。

我已尝试将尺寸从100％更改为自动和封面，使用vw和vh等播放，但仍然无法正常工作。

这里是CSS：

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="cuTheControl.ascx.cs" Inherits="proyectName.Controls.cuTheControl" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<asp:Table ID="cssForTable" runat="server" Height="20px" CellPadding="0" CellSpacing="0" Width="232px" style="border-collapse: separate;">
    <asp:TableRow ID="cssForRow">
        <asp:TableCell CssClass="cssForTD">
            <asp:Button runat="server" Width="80px" ID="Button1" Height="25px" Text="ControlText" CssClass="cssForButton"></asp:Button>
        </asp:TableCell>
    </asp:TableRow>
</asp:Table>

如果有人能提供帮助那就太棒了！该网站是adammillsmusic.com

谢谢！

Answer 1

对于响应式图像，请在.intro class

中执行以下操作

intro {
    max-width: 100%;
    height: auto;
    display:block;
    padding: 0;
    text-align: center;
    color: #333;
    background: url(../img/intro-bg.jpg) no-repeat center top;
    background-color: #e5e5e5;
    background-size: contain;
    -webkit-background-size: contain
}

主要变化

max-width: 100%;
height: auto;
display:block;

希望这有帮助

Answer 2

您为属性添加了不同的值：

-webkit-background-size: cover;：在webkit（Chrome＆amp; co）上，介绍背景
background-size: auto;在其他浏览器上，请勿涵盖

这可能是您在桌面上看到覆盖背景并在移动浏览器上显示意外结果的原因。

body {
  display: table;    
  height: auto;    
  width: auto; /* 100% originally */ .   
  padding: 0;    
  text-align: center;    
  color: #333;    
  background: url(//placecage.com/200/200) no-repeat center top;    
  background-color: #e5e5e5;    
  background-size: cover;     
}

Answer 3

将max-width设置为100％，如下所示：

max-width: 100%;

Answer 4

感谢您的帮助 - 这确实解决了问题。虽然现在看到结果后，我想通过在移动网站上使用'@media'来调用较小尺寸的图像可能会更明智一些。唯一的问题是在我的代码编辑器中，当我尝试这样做时，它似乎无法识别'@media'标签并将其视为/ * * / 有什么想法吗？！感谢

@media screen and (max-width: 600px) {
.intro {background-color: #e5e5e5;
background: url(../img/Bg-mountain-small.png) no-repeat center top;
}

CSS：背景图片未在移动设备上重新缩放

4 个答案: