gpt4 book ai didi

javascript - 如何使图像宽度与屏幕宽度相同

转载 作者:行者123 更新时间:2023-12-02 15:44:41 25 4
gpt4 key购买 nike

我正在尝试使我的学校元素的网站适合移动设备,但我不希望用户向左或向右滚动以查看图像。我希望图像的最大宽度值与用户屏幕的宽度相同。 (在移动设备上时)

CSS

html, body {
height: 100%;
width: 100%;
margin: 0;
}


header{
margin: 0 auto;
justify-content: center;
width: 519px;
height: 200px;
}

header img{
width: 519px;
height: 200px;
}

HTML

<header>
<h1 class="hidden">Welcome to caillou.tk!</h1>
<a href="/"><img src="img/k.png" alt="Caillou Logo"></a>

</header>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="https://www.youtube.com/channel/UC4yQCVlLhTmOqX5kUkAGr0g">Watch</a></li>
<li><a href="characters">Characters</a></li>
<li><a href="about">About Caillou</a></li>
<li><a href="credits">Credits</a></li>
</ul>
</nav>

是的,这是一个关于卡由的网站,我也有一个学校元素

最佳答案

我建议在 css 类中使用百分比属性,例如:

img {
width: 100%;
height: 100%;
}

如果仅在移动设备上,您可以使用媒体查询:

@media screen and (min-width: 992px) {
img {
width: 100%;
height: 100%;
}
}

编辑:基于新代码并用随机图像来表示。

html, body {
height: 100%;
width: 100%;
margin: 0;
}


header{
margin: 0 auto;
justify-content: center;
width: 100%;
height: 200px;
}

header img{
display:flex;
width: 100%;
height: 100%;
}
<header>
<h1 class="hidden">Welcome to caillou.tk!</h1>
<a href="/"><img src="https://www.intz.com.br/wp-content/uploads/wallpapers/WallpaperLiquifyUltraWide.png" alt="Caillou Logo"></a>

</header>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="https://www.youtube.com/channel/UC4yQCVlLhTmOqX5kUkAGr0g">Watch</a></li>
<li><a href="characters">Characters</a></li>
<li><a href="about">About Caillou</a></li>
<li><a href="credits">Credits</a></li>
</ul>
</nav>

关于javascript - 如何使图像宽度与屏幕宽度相同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/74680152/

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