当窗口调整响应设计大小时，div 内的图像会调整大小

Posted 2023-03-06

【中文标题】当窗口调整响应设计大小时，div 内的图像会调整大小

【英文标题】：Image inside div resizes when window resizes REPONSIVE DESIGN

【发布时间】：2013-05-28 16:06:57

【问题描述】：

这是我的问题/问题/场景/我现在三个小时都想不通的事情。

http://jsfiddle.net/5f6dK/

这是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;

这是一个网站标题。

问题：

header由3个组件组成，两个header logo和adsense广告。

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

有什么建议吗？

请帮忙！我感谢您的帮助！ :)

【参考方案1】：

简单的答案：将宽度设置为百分比，即width:30%，以此类推，height:auto，填充和边距为 0。

【参考方案2】：

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

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

说实话，您不需要图像是响应式的，因为它足够小，可以放在任何屏幕上。然而，如果你真的想要这个，你可以移除容器上的浮动，并给图像一个宽度，比如 30%。然后它将随浏览器缩放。

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

【讨论】：

我这样做是因为谷歌广告的宽度固定为 728 像素，如果不调整徽标大小就无法适应这三个组件。不管怎样，你给了我一个好主意。再次感谢！！！

很高兴它有帮助，凯琳。 :-)