I am trying to create a banner using 3 images as shown in this codepen
The view is all ok if it is over 1200px but when screen size goes down, it gets overlapping.
.yourlimit img:first-child{
position: absolute;
left: -8%;
bottom: 0;
}
.yourlimit img:last-child{
position: absolute;
bottom: 40%;
right: -8%;
}
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container px-md-0 my-5 mx-auto position-relative text-center yourlimit">
<img class="" src="https://i.ibb.co/GWFDsFk/limit-left-border.png" alt="">
<img class="img-fluid" src="https://i.ibb.co/t2388tK/limit-img.png" alt="">
<img class="" src="https://i.ibb.co/XjHJ1dZ/limit-right-border.png" alt="">
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</html>
Any idea will be appreciated.
First, I suggest making the main, center image (https://i.ibb.co/t2388tK/limit-img.png) not have the white lines on either end that are already covering up some of the text - that will be impossible to line up across browsers and screen sizes.
Next, I achieved the desired effect by adjusting your CSS. I removed the bottom rules because that was preventing the images align at the top, which makes it simpler to adjust IMO. I also set the first image to left: 0; and the last image to right: 0.
From there, your have the following rules to adjust until you get what you want are the width of each image:
width of each image (in percentages for responsive layout)
absolute positioning if you really need to, but I don't think it's necessary.
Here's my new CSS to plug into your Codepen. Note that I put red borders around the images just to get a sense of where they are - obviously remove these once you're done.
img {
border: solid red 1px;
}
.yourlimit img:first-child{
position: absolute;
left: 0;
width: 20%;
}
.yourlimit .img-fluid {
width: 80%;
}
.yourlimit img:last-child{
position: absolute;
right: 0;
width: 20%;
}
You can use media queries to target the two images so that the size is reduced on smaller screens.
For example:
#media screen and (max-width: 600px) {
.yourlimit img:last-child{
width: 50%;
}
.yourlimit img:first-child{
width: 50%;
}
}
Note that you will have to adjust the width in order to determine what will work best for your use case.
As the screen gets smaller in width the container shrinks as well. So your left and right images are +-8% of the scrunched up container. The easiest option is to give the container the width of the center image:
.container {
width: 1140px;
}
Related
Whilst trying to make an image fit into a rectangle, I came across a weird problem and wondered if anyone knew why these three ways of using object fit act differently:
.container {
width: 250px;
padding-top: 20%;
border: 1px solid red;
position: relative;
display:inline-block
}
.container>img {
position: absolute;
top: 0;
left: 0;
object-fit: contain;
object-position: center center;
}
.image {
width: 100%;
height: 100%;
}
.image-1 {
right: 0;
bottom: 0;
}
.image-2 {
right: 0;
bottom: 0;
max-height: 100%;
max-width: 100%;
}
<div class="container">
<img src="https://www.fillmurray.com/200/300" class="image">
</div>
<div class="container">
<img src="https://www.fillmurray.com/200/300" class="image-1">
</div>
<div class="container">
<img src="https://www.fillmurray.com/200/300" class="image-2">
</div>
As you can see from the first image - everything works fine with a width and height. In the second image, I try to set the image so it fills the space with absolute positioning instead of width and height, but this is totally ignored and the image just overflows or stays it's original size.
To fix this, I use a max-width and height on the third image, but then this totally ignores the object-position and doesn't grow to a width or height larger than itself.
Why does object fit only work with a declared width and height and not if the image is just taking up space with coordinates and why does object-position not work with max-width and height?
The image is a replaced element so the use of top/left/right/bottom will not work like it will do with a non-replaced element (a simple div for example). Here is the relevant parts from the specification:
https://www.w3.org/TR/CSS2/visudet.html#abs-replaced-width
https://www.w3.org/TR/CSS2/visudet.html#abs-replaced-height
To make it easier the computed height/width of your image aren't defined by the top/bottom and right/left values but it's using the default one of the image thus there is no ratio distortion and object-fit will do nothing.
Use different value for bottom/right and you will see that they are ignored:
.container {
width: 250px;
padding-top: 20%;
border: 1px solid red;
position: relative;
display:inline-block
}
.container>img {
position: absolute;
top: 0;
left: 0;
object-fit: contain;
object-position: center center;
}
.image-1 {
right: 0;
bottom: 0;
}
<div class="container">
<img src="https://www.fillmurray.com/100/200" class="image-1" >
</div>
<div class="container">
<img src="https://www.fillmurray.com/100/200" class="image-1" style="right:100px;bottom:10000px">
</div>
<div class="container">
<img src="https://www.fillmurray.com/100/200" class="image-1" style="right:-10px;bottom:-10000px">
</div>
<div class="container">
<img src="https://www.fillmurray.com/100/200" class="image-1" style="right:-100px;bottom:50%">
</div>
Basically the top/left are simply adjusting the position and the intrinsic size of the image are used. If you explicitely specify the width/height or you add max-width/max-height constraint then you will be able to change the computed height/width like you already did.
Related question where the same happen with an input element: Width of absolute positioned input doesn't follow CSS rules
In your situation object-fit is only working for the first case where we have ratio distortion since you set height:100% and width:100%. Nothing will happen on the second case (like explained above) and also for the third case since you simply defined max-height/max-width thus the image will simply follow this constraint and will try to keep it's initial ratio.
In other words, object-fit will only work if you change the width AND the height AND this change break the initial ratio. Changing only one of them or none of them make the use of object-fit useless.
Related questions:
CSS object-fit: contain; is keeping original image width in layout
How does object-fit work with canvas element?
Whilst trying to make an image fit into a rectangle, I came across a weird problem and wondered if anyone knew why these three ways of using object fit act differently:
.container {
width: 250px;
padding-top: 20%;
border: 1px solid red;
position: relative;
display:inline-block
}
.container>img {
position: absolute;
top: 0;
left: 0;
object-fit: contain;
object-position: center center;
}
.image {
width: 100%;
height: 100%;
}
.image-1 {
right: 0;
bottom: 0;
}
.image-2 {
right: 0;
bottom: 0;
max-height: 100%;
max-width: 100%;
}
<div class="container">
<img src="https://www.fillmurray.com/200/300" class="image">
</div>
<div class="container">
<img src="https://www.fillmurray.com/200/300" class="image-1">
</div>
<div class="container">
<img src="https://www.fillmurray.com/200/300" class="image-2">
</div>
As you can see from the first image - everything works fine with a width and height. In the second image, I try to set the image so it fills the space with absolute positioning instead of width and height, but this is totally ignored and the image just overflows or stays it's original size.
To fix this, I use a max-width and height on the third image, but then this totally ignores the object-position and doesn't grow to a width or height larger than itself.
Why does object fit only work with a declared width and height and not if the image is just taking up space with coordinates and why does object-position not work with max-width and height?
The image is a replaced element so the use of top/left/right/bottom will not work like it will do with a non-replaced element (a simple div for example). Here is the relevant parts from the specification:
https://www.w3.org/TR/CSS2/visudet.html#abs-replaced-width
https://www.w3.org/TR/CSS2/visudet.html#abs-replaced-height
To make it easier the computed height/width of your image aren't defined by the top/bottom and right/left values but it's using the default one of the image thus there is no ratio distortion and object-fit will do nothing.
Use different value for bottom/right and you will see that they are ignored:
.container {
width: 250px;
padding-top: 20%;
border: 1px solid red;
position: relative;
display:inline-block
}
.container>img {
position: absolute;
top: 0;
left: 0;
object-fit: contain;
object-position: center center;
}
.image-1 {
right: 0;
bottom: 0;
}
<div class="container">
<img src="https://www.fillmurray.com/100/200" class="image-1" >
</div>
<div class="container">
<img src="https://www.fillmurray.com/100/200" class="image-1" style="right:100px;bottom:10000px">
</div>
<div class="container">
<img src="https://www.fillmurray.com/100/200" class="image-1" style="right:-10px;bottom:-10000px">
</div>
<div class="container">
<img src="https://www.fillmurray.com/100/200" class="image-1" style="right:-100px;bottom:50%">
</div>
Basically the top/left are simply adjusting the position and the intrinsic size of the image are used. If you explicitely specify the width/height or you add max-width/max-height constraint then you will be able to change the computed height/width like you already did.
Related question where the same happen with an input element: Width of absolute positioned input doesn't follow CSS rules
In your situation object-fit is only working for the first case where we have ratio distortion since you set height:100% and width:100%. Nothing will happen on the second case (like explained above) and also for the third case since you simply defined max-height/max-width thus the image will simply follow this constraint and will try to keep it's initial ratio.
In other words, object-fit will only work if you change the width AND the height AND this change break the initial ratio. Changing only one of them or none of them make the use of object-fit useless.
Related questions:
CSS object-fit: contain; is keeping original image width in layout
How does object-fit work with canvas element?
I am creating a landing page with HTML/CSS and using a little bit of bootstrap. I am having trouble resizing my main page to fit 100% height and width when the page is opened.
I want it to look like google docs' main page: https://www.google.com/docs/about/. If you go there, you'll see:
the nav is in fixed position and follows you everywhere. I got that part down.
The main image automatically resizes depending on your screen size. The icon-arrow-hint (the arrow on mid-bottom of page) can always be seen on the bottom of the image.
Two problems that I have:
Got this weird gap on the right side even though I set right: 0.
After page load, it looks like it fits about 90% of the height and I still need to scroll down. I placed this text on the bottom - theoretically, this should be shown on the bottom of the screen without scrolling, but I have to always scroll slightly down.
This is the JSfiddle: https://jsfiddle.net/iggyfiddle/DTcHh/35435/
I am using position: absolute and I 0-ed all 4 sides.
How can I fit the yellow div 100% height and 100% width like the google page nicely?
If you give an element height: 100%, but there's another element above or below in the same container, you need to adjust for the height of the other element, otherwise there will be an overflow.
Also, adjust for the -15px horizontal margins applied by Bootstrap.
Try this:
.primary-content {
position: absolute;
top: 10%;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 90%; /* ADJUSTMENT */
background: yellow;
margin: 0; /* NEW */
}
https://jsfiddle.net/DTcHh/35437/
Your .primary-content div has the bootstrap .row class on it which declares negative horizontal margins. A solution would be to remove the .row class from your div or to override the margins in css.
These are the default bootstrap .row styles:
.row {
margin-right: -15px;
margin-left: -15px;
}
Using the class of .row adds a margin of 15px. A quick fix is to remove the class from primary-content div like so.
<div class="primary-content">
<div class="col-md-12">
<h1>This is a super awesome product</h1>
<h4>Help me stackoverflow, you are my only hope!</h4>
</div>
or add a class and remove the margins.
The reason that your yellow div is going too far is that you need to set the height to 90%.
To fix the weird padding on the right side, add margin: 0 !important;.
.primary-content {
position: absolute;
top: 10%;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 90%; // change this
background: yellow;
margin: 0 !important; // add this
}
See this JSFiddle or run the snippet below
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.universal-header {
background: red;
border-radius: none;
height: 10%;
width: 100%;
position: fixed;
}
.color-brown {
color: #58482C;
text-decoration: none;
}
.primary-content {
position: absolute;
top: 10%;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 90%;
background: yellow;
margin: 0 !important;
}
.bottom {
position: absolute;
bottom: 0;
right: 0;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<nav class="navbar universal-header navbar-static-top">
<a class="navbar-brand navigation-title color-brown">
</a>
<span class="color-brown navbar-brand navigation-title">HELLO</span>
<span class="navbar-brand navigation-title pull-right color-brown">Login</span>
<span class="navbar-brand navigation-title pull-right color-brown">Features</span>
<span class="navbar-brand navigation-title pull-right color-brown">About</span>
</nav>
<div class="row primary-content">
<div class="col-md-12">
<h1>This is a super awesome product</h1>
<h4>Help me stackoverflow, you are my only hope!</h4>
</div>
<div class="bottom">
You should be able to see me without scrolling
</div>
</div>
Problem 1:
Got this weird gap on the right side
When using bootstrap's row class it will add a margin of -15px to the left and right of your div, see the second answer to this question if you want to understand better why.
Solution: don't use the row class for your primary-content div.
Problem 2:
this should be shown on the bottom of the screen without scrolling,
but I have to always scroll slightly down
you are using absolute positioning, remember that needs a relative positioned parent container, in your case, since you don't have any, everything is relative to the initial containing block, hence your viewport/window.
Quick fix: delete the height: 100%; css from .primary-content
Warning: using absolute positioning the way you are right now will bring you trouble if you want to add more content below your yellow container
Please Help me to center the message box on fit on any screen resolution..
can you show what css or style, margins, left, right,that I can use?
Center Horizontally
To center a div horizontally you can use margin: auto auto; width: 500px where the width is any width you want it to be.
JS Fiddle
HTML:
<div id="content">
Some content
</div>
CSS:
#content {
width: 200px;
margin: auto auto;
background-color: #CCC;
}
Center screen with fixed dimensions
If you can fix the content height and width then it's possible to center the div both horizontally and vertically using just css. This is achieved by wrapping your content in another div, then positioning your content div's top: 50% and then subtracting half the height of it's margin from it: margin-top: -100px, assuming the height was 200px. See example below:
JS Fiddle.
HTML:
<div id="wrapper">
<div id="content">
Some content
</div>
</div>
CSS:
#wrapper {
position: relative;
background-color: #EEE;
width: 200px;
height: 200px;
font-size: 10px;
}
#content {
position: absolute;
top: 50%;
left: 50%;
width: 80px;
height: 80px;
margin-top: -40px;
margin-left: -40px;
background-color: #DDD;
}
Pretend it's vertically centered
Also you can give a fixed margin-top (or top with position: absolute) to make it seem vertically centered in most desktop and laptop screens.
JS Fiddle
HTML:
<div id="content">
Some content
</div>
CSS:
#content {
width: 200px;
margin: 100px auto;
background-color: #CCC;
}
Use Javascript
It is not possible to vertically center content with arbitrary height using just css. In this case you will need to use Javascript to position the div.:
The basic idea is:
you calculate the height of the content at the time you need to show the content, or when the content is loaded.
Then change any of the many css properties to position the div at the vertical center.
My personal preference is you to use position: absolute with top property. You can also use margin-top but you probably don't want this div to take up space in the box model if you have other content on the page.
JS Fiddle
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function() {
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var el = $('#content');
var elWidth = el.width();
var elHeight = el.height();
el.css({
position: 'absolute',
top: (windowHeight / 2) - (elHeight / 2),
left: (windowWidth / 2) - (elWidth / 2),
});
});
</script>
<style>
#content {
width: 200px;
height: 200px;
background-color: #CCC;
}
</style>
</head>
<body>
<div id="content">
Some content
</div>
</body>
</html>
Use any of the many Javascript "plugins" available
There is a multitude of CSS frameworks around the web that provide boilerplate CSS that we use on most websites. And some of these also help with these kind of common presentation issues with small Javascript plugins. Personally I know that Twitter Bootstrap provides a Modal plugin which you can use for this purpose. There is also many jQuery plugins for the sole purpose of centering content in a page.
Conclusion
Although there is a multitude of options to achieve this, I it sad to see that CSS still does not support doing this. Maybe it's a hard thing to do across different scenarios, I don't know. From the options that I mention above, I think the Javascript option is the most versatile, and with todays browser speeds, and the likeliness that nobody would have Javascript disabled on their browser, this would be the best way to go.
I just saw this after reading about how to do one on a CSS Techniques page.
Basically, define a little CSS:
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
ADVANTAGES:
Cross-browser (including IE8-10)
No special markup, minimal styles
Responsive with percentages and min-/max-
Use one class to center any content
I have not had time to test it out, but I wanted to post it up here in the hope that it helps others.
Here is what you are searching for http://tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/
You can easily make it with jquery! Or with an css solution given on this site!
You should give us your code that you have tried. Assume that you have HTML code like below:
<div id="message">
Hello World!
</div>
CSS code:
#message {
width: 100px;
height: 100px;
margin: 50px auto;
}
Then your message box will be 100x100 and 50px from the top of the screen and automatically aligns to the center of the screen.
I'm not sure if I can do this, but this comes so close, I can't imagine it is impossible.
I'm aiming for a pure CSS/HTML solution.
I want two images with natively different heights to appear side by side with equal heights.
I want the left image to cover 60% of a div, the right image can have the remaining 40% (I know it will be less than 40% wide, but not its exact width).
The combo should appear in a div that covers 70% of the window width, regardless of the window size. Example of layout
Both images should retain their aspect ratio. Above left drawing shows a browser window with the unscaled images, the second is where the div covers about 60% of the window width, with the images showing in equal heights, and regardless of the browser window width, these percentages should remain unaltered, as I tried to show in the third and fourth diagram.
I've tried numerous variations, but often the right image wraps under the left one if the window becomes too small, or the images only scale with window height, which is definitely not what I want.
Here's a bare-bones example of my solution, using an embedded stylesheet:
<!DOCTYPE html>
<html>
<head>
<title>Stackoverflow Question</title>
<style>
div {
height: /*unfortunately cannot be a percentage*/ 200px;
width: 70%;
}
img.leftimage {
float: left;
width: 60%;
height: 100%;
}
img.rightimage {
float: right;
width: 40%;
height: 100%;
}
</style>
</head>
<body>
<div>
<img src="droids.jpg" class="rightimage" />
<img src="WinZip.png" class="leftimage" />
</div>
</body>
</html>
Here is a fiddle using colors instead of images, and if it matters these are the images I used above - clearly different height/width ratios:
Kitting the beg borrow and steal together, I get this working example:
<!DOCTYPE html>
<html>
<head>
<title>Stackoverflow Question</title>
<style type="text/css">
.aspectwrapper {
display: inline-block; /* shrink to fit */
width: 40%; /* whatever percentage of window's width you like */
position: relative; /* so .content can use position: absolute */
}
.aspectwrapper::after {
padding-top: 40%; /* play with this to fit both images in one line */
display: block;
content: '';
}
.content {
position: absolute;
top: 0; bottom: 0; right: 0; left: 0; /* follow the parent's edges */
outline: thin dashed green; /* just so you can see the box */
overflow: hidden;
}
.images {float: left;}
img {width: auto;height: 100%;}
</style>
</head>
<body>
<div class="aspectwrapper">
<div class="content">
<div class="images">
<img src="img1.jpg" />
<img src="img1.jpg" />
</div>
</div>
</div>
</body>
</html>