文章/答案/技术大牛

发布

社区首页 >问答首页 >在屏幕上适配图像以避免滚动

问在屏幕上适配图像以避免滚动
EN

Stack Overflow用户

提问于 2016-02-17 03:51:56

回答 1查看 71关注 0票数 0

所以我正在用Dreamweaver完成我的第一个网站。我只想知道如何在没有滚动的情况下实现我的徽标适合屏幕。因为它在我的屏幕上看起来没问题，但在较大的屏幕上，图像变得太大，我们将不得不滚动。提前感谢各位的光临。

图片大小:宽: 7,24高: 7,17

HTML

<!doctype html>
<html>

<head>
  <link href="css1.css" rel="stylesheet" type="text/css">
  <meta charset="utf-8">
  <title>Matic Toni</title>
</head>

<body>
  <div class="logo">
        <a href="projects.html">
          <img src="lg.png" width="40%" alt="" />
        </a>
  </div>
  <footer>copyright 2016 maticoni</footer>
</body>

</html>

CSS

@charset "utf-8";
div {
text-align: center;
padding-bottom: 30px;
}
body {
/* background-image: url(background.jpg);
background-sizce: cover; */
background-color: #F6F6F6;
}

.logo {
padding-top:3%;
}

footer {
font-family:"Proxima";
clear: both;
color: black;
font-size: 100%;
margin-top: 5%;
margin-right: 5%;
margin-left: 5%;
text-align: center;
}

li a img {
padding-top: 3%;
}

@font-face {
font-family: Proxima;
src: url(Fonts/Proxima_Regular.otf);
}

css

image

scroll

position

html

回答 1

Stack Overflow用户

发布于 2016-02-17 03:54:47

设置img.logo的最大宽度。这也将防止它在较大屏幕尺寸时变得像素化。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/35441807

复制

相似问题

问在屏幕上适配图像以避免滚动
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在屏幕上适配图像以避免滚动EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在屏幕上适配图像以避免滚动
EN