缩放窗口大小的div div

所以，我是一个初学者的HTML/CSS编码器，并试图做一个简单的网站。现在我有一个整洁的背景，表现完美。但是，在顶部中心添加徽标时，它在当前窗口大小上看起来很完美。但是当我调整窗口大小时，一半的标志被切断。缩放窗口大小的div div

我的CSS样式：

.header-logo { 
background: url(images/header-logo.png); 
position: relative; 
height: 200px; 
margin-left:auto; 
margin-right:auto; 
background-size:cover; 
width: 971px; 
z-index: 2; 
}

我想有一个自动规模的CSS/JS设置为，但我不幸运地找到它。

所有帮助表示赞赏！

路易

来源

2016-05-19 Louis de Looze

你应该在你的CSS – MayK

杜佩http://stackoverflow.com/questions/18666106/a-div-with-auto-resize-when的使用@media查询 - 改变窗口宽度高度？ – Oisin

的问题是这两行代码：

height: 200px; 

width:971px;

当您使用“PX”是像素的固定金额，这意味着它不能根据屏幕大小而改变。如果您使用“em”，则图像将根据访问者的屏幕大小而改变。

这里有两个快速参考，我希望可能会有所帮助。

http://www.w3schools.com/cssref/css_units.asp

http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/

要解决它，你会做这样的事情：

height: 100em; 

width:486em;

（不要用我的，当然精确值。）

编辑：或者，使用这样的百分比可能会很好：

width: 971px; 
max-width:100%

编辑2：有人指出，我认为你可能想加入这一行，以及：

height:auto;

来源

2016-05-19 19:18:10 CSLearner

或用户百分比值？ 100％，90％，... – Davuz

这也可以。其实这可能会比我最初的建议更好。在这种情况下，它会是这样的：宽度：971px;最大宽度：100％; – CSLearner

em和vw之间的区别是什么，百分比是否适用于窗口的当前宽度？ –

这是因为你的宽度设置好的被固定在971px，你应使用宽度：100％并设置最大宽度或至少使用@media来设置徽标宽度。

使用@media：

@media screen and (min-width: 480px) { 
    .header-logo{ 
     width: 250px; 
     background-position: center; 
    } 
}

来源

2016-05-19 19:18:29

用你的方法我得到一个滚动条，不幸的是不是一个缩放。 –

这只是一个例子，你需要正确设置你的div的高度和重量 –

好像你想要一个971px宽的标志，你有一个问题时，因为标志被切断的屏幕尺寸小于。

你需要的是一个媒体查询像这样的一个，并将其放置在年底你的CSS

@media (max-width: 971px) { 
    .header-logo { 
     width: 100%; 
    } 
}

这样971px在任何屏幕尺寸将宽度属性更改为屏幕尺寸的100％。

您不需要在媒体查询中重新声明该类的所有属性，它只会更改必须适应新屏幕大小的属性。

了解更多关于媒体查询的位置：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

来源

2016-05-19 19:19:26

当使用百分数时，出于某种原因，我没有图像了。 –

缩放窗口大小的div div

回答

相关问题