gpt4 book ai didi

html - 使图像适合屏幕以避免滚动

转载 作者:行者123 更新时间:2023-11-28 06:23:14 26 4
gpt4 key购买 nike

所以我正在用 Dreamweaver 完成我的第一个网站。我只想知道如何在不滚动的情况下使我的 Logo 适合屏幕。因为它在我的屏幕上看起来不错,但在更大的屏幕上图像变得太大,我们必须滚动。提前感谢您的所有回答。

图像尺寸:宽度: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);
}

最佳答案

为您的 img.logo 设置最大宽度。这也将防止它在更大的屏幕尺寸下像素化。

关于html - 使图像适合屏幕以避免滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35441807/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com