引导程序相对于屏幕大小调整图像大小
我有一个作业，我需要使用html，css和bootstrap创建网站。我几乎已经完成了网页的工作，但是我仍然无法调整lightbox照片库的大小。我希望它根据屏幕尺寸进行调整。屏幕较小=图像较小。我尝试将图像的最大高度和最大宽度设置为100％，但没有用。
100％：
200％：
在300％：
网站：http://syphym.infinityfreeapp.com/TheOfficialPodcast.html
我希望它不是将其设为4比2和2比1，而是要调整其大小并保持其原始位置
很抱歉这个问题，但我真的不知道该如何解决
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<title>The Official Podcast</title>
<style>
*
{
margin: 0;
padding: 0;
}
#HomeScreen
{
background-image: url('Picture/Background.jpg');
background-size: cover;
background-position: center;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
padding: 0 20px;
}
.Theboys
{
background-color: black
}
.Title
{
text-align-last: center;
text-decoration: none;
color: #f2f2f2;
font-size: 50px;
font-family: sans-serif;
letter-spacing: 0.5px;
}
.name
{
background-color: black;
text-align-last: center;
text-decoration: none;
color: #f2f2f2;
font-size: 30px;
font-family: sans-serif;
letter-spacing: 0.5px;
}
.gap100
{
padding:70px 0px;
}
.resize img
{
max-height: 100%;
max-width: 100%;
}
</style>
</head>
<body>
<header id="HomeScreen">
<section class="Theboys">
<div class="container">
<a href=#Official-Podacast>
<center>
<img src="https://i.ytimg.com/vi/jFqL8N3t97Y/maxresdefault.jpg" width="80%" height="80%" >
</center>
</a>
<div class="Title">
The Official Boys
</div>
<div class="row">
<div class="col-md-6 col-lg-3">
<div class="card border-0">
<a class="lightbox" href="#Jackson">
<div class="resize">
<img src="Picture/Jackson.png" alt="img1" class="card-img-top">
</div>
</a>
<div class="name">
Jackson
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card border-0">
<a class="lightbox" href="#Andrew">
<div class="resize">
<img src="Picture/Andrew.png" alt="img1" class="card-img-top">
</div>
</a>
<div class="name">
Andrew
</div>
</div>
</div class="name">
<div class="col-md-6 col-lg-3">
<div class="card border-0">
<a class="lightbox" href="#Charlie">
<div class="resize">
<img src="Picture/Charile.png" alt="img1" class="card-img-top">
</div>
</a>
<div class="name">
Charlie
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card border-0">
<a class="lightbox" href="#Kaya">
<div class="resize">
<img src="Picture/Kaya.png" alt="img1" class="card-img-top">
</div>
</a>
<div class="name">
Kaya
</div>
</div>
</div>
</div>
</div>
</section>
</header>
<section>
<div class="container">
<div class = "row gap100">
<a name="Official-Podacast">
<div class="col-md-6">
<h2>The Official Podcast</h2>
<p>The Official Podcast is where four international man friends congregate to discuss just about everything. Featuring dumb questions, YouTube celebrities, childish giggling, burger puns, more dumb questions, fatherly advice, bad dating stories, even more dumb questions, and a slew of guest stars, The Official Podcast is a weekly show with a little something for everyone. Jackson, Andrew, Charlie, and Kaya gather to talk about only the most important things in life every Thursday at 8pm EST.</p>
<p>Listen to The Official Podcast:</p>
<ul>
<a href="https://podcasts.apple.com/us/podcast/the-official-podcast/id1186089636"><img src="Picture/Itunes.png" width="100" height="100"></a>
<a href="https://open.spotify.com/show/6TXzjtMTEopiGjIsCfvv6W"><img src="Picture/Spotify.png" width="100" height="100"></a>
<a href="https://www.youtube.com/playlist?list=PLRD7N-Zrj2DMPlFktUo5BRduSyCxu8nZy"><img src="Picture/Youtube.png"width="100" height="100"></a>
</ul>
</div>
<div class="col-md-6">
<img src="Picture/TheBoys.jpg" class="img-fluid">
</div>
</a>
</div>
<div class = "row gap100">
<div class="col-md-6">
<a name="Jackson">
<img src="Picture/Jackson.jpg" class="img-fluid">
</div>
<div class="col-md-6">
<h2>Jackson Clarke</h2>
<p>Jackson Clarke is from australia he is the co-host of the Official podcast and he swears that he does not eat crayons anymore.</p>
<p>His internet name is Zealot he manges the editing of the podcast and the moist meter of charlie. He likes lego and dinasours and he is proud of it.</p>
<p>Watch his content:</p>
<ul>
<a href="https://twitter.com/zealotonpc?lang=en"><img src="Picture/Twitter.png" width="100" height="100"></a>
<a href="https://www.twitch.tv/zealotonpc"><img src="Picture/Twitch.png" width="80" height="80"></a>
<a href="https://www.youtube.com/channel/UCIq-p3q6B7BFG4SqltI4-7A"><img src="Picture/Youtube.png"width="100" height="100"></a>
</ul>
</div>
</a>
</div>
<div class = "row gap100">
<div class="col-md-6">
<a name="Andrew">
<h2>Andrew Wagenheim</h2>
<p>TAndrew’s notability on the internet comes twofold. He was originally known for his YouTube channel HuggbeesTV, a variety comedy channel, on which he continues to upload. </p>
<p>Several years later, he also began hosting The Official Podcast alongside Kaya Orsan, Jackson Clarke and Charlie White (known on YouTube as Cr1TiKaL). </p>
<p>Watch his content:</p>
<ul>
<a href="https://twitter.com/HuggbeesTV"><img src="Picture/Twitter.png" width="100" height="100"></a>
<a href="https://www.twitch.tv/huggbeestv"><img src="Picture/Twitch.png" width="80" height="80"></a>
<a href="https://www.youtube.com/results?search_query=huggbees"><img src="Picture/Youtube.png"width="100" height="100"></a>
</ul>
</a>
</div>
<div class="col-md-6">
<img src="Picture/Andrew Hugbess.png" class="img-fluid">
</div>
</div>
<div class = "row gap100">
<div class="col-md-6">
<a name="Charlie">
<img src="Picture/Charlie.jpg" class="img-fluid">
</div>
<div class="col-md-6">
<h2>Charlie White</h2>
<p>Also known as Cr1TiKaL, he is a supremely popular gaming commentator who would earn an astounding 5 million subscribers with viral videos such as "The Most Difficult Game Ever Created Gameplay and Commentary," "The Real Mighty Thirsty" and "The Real Edge of Glory."</p>
<p>He also works on a side project called moist meter where he rate different games and movies.</p>
<p>Watch his content:</p>
<ul>
<a href="https://twitter.com/MoistCr1TiKaL?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor"><img src="Picture/Twitter.png" width="100" height="100"></a>
<a href="https://www.twitch.tv/moistcr1tikal"><img src="Picture/Twitch.png" width="80" height="80"></a>
<a href="https://www.youtube.com/user/penguinz0"><img src="Picture/Youtube.png"width="100" height="100"></a>
</ul>
</div>
</a>
</div>
<div class = "row gap100">
<div class="col-md-6">
<a name="Kaya">
<h2>Kaya Orsan</h2>
<p>He was born in Germany, but his family is from Turkey, where he spent half of his life and a half in Germany. For a while, he was in Turkey but he's back in Germany.</p>
<p>Kaya is known for drinking and going on rants about things that pisses him off. You can buy a poster with his special couger poster on it off the Official Podcast Patreon for $50,000.</p>
<p>Watch his content:</p>
<ul>
<a href="https://twitter.com/kayaorsan"><img src="Picture/Twitter.png" width="100" height="100"></a>
<a href="https://www.twitch.tv/kayaorsan"><img src="Picture/Twitch.png" width="80" height="80"></a>
<a href="https://www.youtube.com/channel/UC5sRNZKwC-CW7cwT-im4RgQ"><img src="Picture/Youtube.png"width="100" height="100"></a>
</ul>
</div>
</a>
<div class="col-md-6">
<img src="Picture/KayaOrsan.jpg" class="img-fluid">
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>
1 个答案:
答案 0 :(得分：1)
当对readarray -t wireless_list <<< "$(awk '/wifi-iface/ {print $3}' /etc/config/wireless | sed s/\'//g)"
for w in "${wireless_list[@]}" ; do
# Do something with $w
echo "$w"
done
使用引导程序时，应该知道页面宽度被划分为12。
例如，如果您有4个NAME READY STATUS RESTARTS AGE
redis-master-7d97765bbb-7kjwn 0/1 Evicted 0 38h
redis-master-7d97765bbb-kmc9g 1/1 Running 0 30m
redis-master-7d97765bbb-sf2ss 0/1 Evicted 0 30m
，而每个都有col，则会将它们放在同一行。
但是，如果您尝试在同一行中放置4次div，那将是一个错误（就像您使用col-3一样）
对于您的要求，我建议将四个col-6中的每一个更改为col-md-6而不是col-3
祝你好运：）
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？