As a newcomer to front end coding, I am currently working on a practice website to familiarize myself with the code. One issue I am facing is related to using a bootstrap grid with an image in the left column. I want to prevent the image size and position from changing when the browser window is resized. An example of what I am trying to achieve can be seen on this website's "Our Famous Freebies" section: . Notice how the images remain consistent in size and position regardless of browser resizing.
Currently, my image continuously resizes as the browser window changes. I have attempted adjusting the height values from % to px without success. So far, I have only focused on styling for large and medium-sized windows, without addressing small or x-small sizes. Below are snippets of my HTML and CSS:
<!DOCTYPE html>
<html>
<head>
<title>Welcome to Philadelphia</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/athletics.css">
</head>
<body>
<div class="full-contain">
<div class="row row-one">
<div class="col-lg-6 col-md-6 top-col">
<img class="img-responsive center-block" src="http://logos-
download.com/wp-
content/uploads/2016/04/Philadelphia_Phillies_logo_logotype.png">
</div>
<div class="col-lg-6 col-md-6 top-col">This is a div</div>
</div>
<div class="row row-two">
<div class="col-lg-6 col-md-6 mid-col">This is a div</div>
<div class="col-lg-6 col-md-6 mid-col">This is a div</div>
</div>
<div class="row row-three">
<div class="col-lg-6 col-md-6 btm-col">This is a div</div>
<div class="col-lg-6 col-md-6 btm-col">This is a div</div>
</div>
</div>
</body>
</html>.top-col {
background-color: #003086;
height: 733px;
color: white;
}
.mid-col {
background-color: #003B48;
height: 733px;
color: white;
}
.btm-col {
background-color: #F4793E;
height: 733px;
color: white;
}
.row-one {
height: 733px;
}
.row-two {
height: 733px;
}
.row-three {
height: 733px;
}
body {
height: 733px;
}
html {
height: 733px;
}
.full-contain {
width: 100%;
height: 733px;
}I apologize for the rough appearance, given that I am still learning the ropes. Any assistance would be greatly appreciated!
Thank you!