Tenebris Mortem
Reputation: 93
Bootstrap resizing the image relative to the screen size
I have an assignment which I am required to make a website using html,css,and bootstrap. I am almost done in finishing the webpage but I am stuck in resizing the lightbox photo gallery. I want it to resize according to the screen size. Smaller screen = Smaller images. I tried setting the max-height and max-width of the images to 100% but it did not work.
at 100%:
at 200%:
at 300%:
Website: http://syphym.infinityfreeapp.com/TheOfficialPodcast.html
I want it to instead of making it 4 to 2 and 2 to 1 I want to resize it and maintain its original position
Sorry for the question but I really don't know how to fix this
code:
<!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/[email protected]/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>
Upvotes: 2
Views: 2637
Answers (1)
SeReGa
Reputation: 1317
When you use bootstrap with cols you should know that the page width is divided to 12.
for example, if you have 4 divs and each of them has col-3 it will place them in the same line.
But if you are trying to put 4 times col-6 in the same row, that would be a mistake (As you did, using col-md-6)
For what you asked, I would suggest changing the class to col-3 instead of col-md-6 col-lg-3 for each of the 4 divs
Upvotes: 3
Related Questions
- image resize in bootstrap
- how can I resize image to meet height in left in bootstrap4
- Bootstrap image not displaying on smaller screens
- Adjusting image in viewport
- How to resize an image to always fit all screen sizes (eg. Bootstrap 4)?
- Responsive image in Bootstrap 4
- Image not responsive in Bootstrap 4
- Best way to resize image to fit div (as background)
- Adjust Bootstrap image resizing
- How to keep image size correct in different resolutions, in Bootstrap?