Question

这是我的问题/问题/情景/我现在无法弄清楚的事情。

这是css：

header {
    width:100%;
    height:95px;
    color:#FFF;
    position:fixed;
    width:100%;
    background:#3b5998;
    display:block;
    z-index:99999;
    top:0px;
    border-bottom:1px solid ##133783;
    float:left;
}

.inner-header {
    margin:0px auto !important;
    width:100%;
    height:95px;
    max-width:1400px;
    min-width:700px;
    padding:0 10px 0 10px;
}

.header-logo{
    padding-right:10px;
    width:100% auto;
}

img#header1280-1366 {
    width:100%;
}

.header-logo, .xbdlogo {
    float:left;
}

.header-adsense {
    float:left;
}

.xbdlogo {
    top:-100px;
    display:block;
    position:relative;
    -webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
    overflow:auto;
    margin-right:10px;
}

.header-logo:hover + .xbdlogo {
    top:30px;
}

.header-adsense {
    padding-top:2px;
}

这是一个网站标题。

问题：

标题由3个组件组成，即两个标题徽标和adsense广告。

我想让它响应，只要用户重新调整窗口大小，是否可以将PNG BENDAGGERS重新调整为较小的图像。我遇到了麻烦。我将宽度设置为100％，但它不起作用。

有任何建议怎么做？

请帮忙！我感谢您的帮助！：）

Answer 1

我想让它响应，每当用户重新调整窗口大小时，如果PNG BENDAGGERS重新调整为较小的图像，是否可能。我遇到了麻烦。我将宽度设置为100％，但它不起作用。

图像位于浮动div内，该div包裹图像的大小，因此在这种情况下width: 100%只能与图像本身一样大。如果你没有浮动容器，图像会很大（与蓝色区域一样宽），所以这也不是你想要的。

老实说，您不需要图像响应，因为它足够小，可以放在任何屏幕上。但是，如果你真的想要这个，你可以删除容器上的浮动，并给图像宽度，比方说，30％。然后它将与浏览器一起扩展。

请注意，它会在700px处停止缩放，因为inner-header div的最小宽度为700px。

Answer 2

简单回答：将宽度设为百分比，即width:30%，依此类推，height:auto，填充和边距为0.

当窗口调整RESPONSIVE DESIGN时，div内的图像会调整大小

2 个答案: