Problems with window resize using vw and vh measures - javascript

Im experimenting with vh and vw measures so I have stuck with this problem: when I resize window vertically/open chrome console and then scroll window down background doesn't load in a process of scrolling. How I can recalculate window view ? Or how else I can fix this problem? Is it necessary to use media queries?
Any help will be appreciate.
.m-page-header {
display: flex;
}
.m-page-header__wrapper {
margin: 0 auto;
}
.m-page-header__img-container {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
}
.m-page-header img {
max-width: 100%;
height: auto;
display: block;
}
.main-content {
display: block;
background-image: url("https://image.ibb.co/hTboSm/1_HEADER_bg.jpg");
background-size: 100%;
background-repeat: no-repeat;
width: 100vw;
height: 100vh;
}
.main-content__wrapper {
max-width: 960px;
margin: 0 auto;
}
html,
body {
height: 100%;
}
body {
min-width: 960px;
}
.visually-hidden {
display: none;
}
<body>
<main class="main-content">
<div class="main-content__wrapper">
<header class="m-page-header">
<div class="m-page-header__wrapper">
<section class="m-page-header__img-container">
<h2 class="page-header__header-text visually-hidden">Game</h2>
<img src="https://image.ibb.co/cNjQ7m/1_HEADER_logo.png" alt="Game">
</section>
</div>
</header>
</div>
</main>
</body>

You have two solutions :
1) add background-size: contain to .main-content :
window resizing will not crop the background anymore. The background will stay completely visible but it won't stretch horizontally.
https://jsfiddle.net/o0p9y03f/
2) add background-size: cover to .main-content :
The background will keep on stretch horizontally but it will be cropped to fill the entire container.
In any case you will have to deal with the size and the centering of the container, depending on which result you are looking for.
https://jsfiddle.net/o0p9y03f/1/

Related

How to keep size proportions for div's child elements

TL;DR: How to keep the div children proportional to the div itself?
I have a div, containing various elements like text, images, icons etc. It keeps 16:9 aspect ratio and fills as much viewport it can, while resizing the browser window, the div (with background different from the body background) changes size well, though the contents are staying the same size which is bad because I'm trying to make a presentation website which needs to look the same at various resolutions. How do I make the child elements align and resize properly inside the div?
I tried using viewport units though it didn't turn out really well.
My Code:
I tried using % units to set font size and then use em to scale other things but it didn't work. I also tried using only % units to set all properties but it did not work either
body {
background: black;
user-select: none;
margin: 0;
height: 100vh;
}
.container2 {
overflow: auto;
box-sizing: border-box;
resize: both;
overflow: auto;
max-width: 100%;
height: 100%;
display: flex;
justify-content: center;
}
.presentation-place {
user-select: none;
background: white;
top: 50%;
transform: translate(0, -50%);
position: absolute;
align-items: center;
aspect-ratio: 16 / 9;
}
#media screen and (max-aspect-ratio: 16 / 9) {
.presentation-place {
width: 100vw;
}
}
#media screen and (min-aspect-ratio: 16 / 9) {
.presentation-place {
height: 100vh;
}
}
.slide {
font-size: 100%;
position: absolute;
top: 0;
bottom: 0;
margin: 0 auto;
width: 100%;
height: 100%;
overflow: hidden;
background: red;
background-position: center center;
}
.title1 {
margin-left: 1em;
font-size: 6em;
position: absolute;
margin-top: 2em;
}
<html>
<body>
<div class="container">
<div class="presentation-place">
<div class="slide s1">
<h1 class="title1">test</h1>
</div>
</div>
</div>
</body>
</html>
Make sure to avoid specific units like cm, px etc because those are fixed units no matter the scale of the site itself or the monitor, the use of Units like % since vh/vw didnt work. % scales relative to the size of the monitor or website, so this should help. Alternativly you could use aspect-ratio because it scales relative to the size of the parent element

Get exactly the same image sizes horizontally and vertically (Special case)

I want to create a special image gallery. All images should have the same size, but some are in portrait format, and some are in landscape format. Example: If the landscape format image is 500px wide and 300px high, the portrait format image should be 300px wide and 500px high. But the layout shouldn't be based on pixel values, and also not on vw or vh.
In the last hours, I tried to get the correct dimensions with percentage adjustments. But it's always a bit different in different browsers and browser sizes.
What I need: The (flexible) height of .vertical should be the width of .image. So it should impact the same pixel value.
Is that possible with CSS? Or maybe with jQuery?
Ah, and it's important to keep this width: calc(50% - 28px);.
Would be very thankful for help!
.image-gallery {
width: 70%;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: center;
align-content: flex-start;
background: darkgrey;
}
.image {
width: calc(50% - 28px);
margin: 20px;
}
.vertical {
width: calc(72.3% - 28px); /* Instead of this, I need here the (flexible) height of ".image" */
}
img {
width: 100%;
float: left;
}
<div class="image-gallery">
<div class="image">
<img src="https://cassandraladru.com/wp-content/uploads/2018/03/AnnieRob_FINALS-434.jpg" />
</div>
<div class="image vertical">
<img src="https://cassandraladru.com/wp-content/uploads/2018/03/AnnieRob_SP-43-1616x1080.jpg" />
</div>
</div>
Please try the following code.
.image-gallery {
width: 70vw;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: center;
align-content: flex-start;
background: darkgrey;
}
.image {
width: calc(50% - 28px);
margin: 20px;
}
.vertical {
width: auto;
}
img {
width: 100%;
float: left;
}
.vertical img{
max-height: 100%;
width: auto;
}
Since all images will have same size, vertical image will have width of image as height.
According to your css, normal image (portrait image) will have (35vw - 28px) width because .image-gallery has 70vw width.
So vertical image will have 35vw-28px as height.
Please try my code and if you have any question, please comment me.
UPDATE
Added jQuery code.
<script>
$(window).resize(function(){
$('.vertical').height($('.image:not(.vertical)').width());
}).trigger('resize');
</script>

Show Complete Pictures in Catalog

I have catalog of 6 picture. I am showing them in 1 row. On larger screens all 6 photos shows correctly, but when i change screen width to tablet size of mobile size, picture cuts in half.
The behaviour i want is that, show all 6 pictures on larger screen, but as soon as user window size, only picture which can be shown completely in that particular screen size show show, and other should get hide. Right now, I am using overflow: hidden and container of fixed size.
Below are some screenshots to show the issue,
The question is too general but I think this would be a sample for it.
add below styles to the div wraps images.
.wrapper {
display: flex;
flex-wrap: wrap;
overflow: hidden;
// the following styles are optional but you must specify width and height
width: 100%;
height: 320px;
padding: 20px;
}
and add these styles to images.
img {
height: 100%;
width: auto;
// optional
margin-right: 50px;
margin-top: 50px;
}
The wrapper styles make that images wrap in multiple lines if they expand the wrapper width and overflow: hidden makes that only single line shows
Use width:100% on img tag in html
OR
You can use it n your style-sheet like
img{
width:100%;
}
also try to use objectfit:contain if you img has some fixed height width
here is amir mahdi digbari expanded solution in action.
You can achieve the same with css grid but flexbox is good enough for this.
.img {
height: 200px;
width: 200px;
border: 1px solid red;
}
.wrapper {
display: flex;
overflow: hidden;
width: 100%;
height: 200px;
flex-wrap: wrap;
justify-content: space-around;
border: 2px solid blue;
}
.container {
width: 1250px;
max-width: 100%;
margin: auto;
}
<div class="container">
<div class="wrapper">
<div class="img">Img1</div>
<div class="img">Img2</div>
<div class="img">Img3</div>
<div class="img">Img4</div>
<div class="img">Img5</div>
<div class="img">Img6</div>
</div>
</div>
Happy coding!

CSS media: how to run the media code only if scroll bar appears (or how to imitate with JavaScript)?

How can I use CSS #media to imitate javaScript for the this condition below?
For instance, I want to run the code inside #media only when the image's height is longer than window's height, or in other words, when only the right scroll bar appears because the image height is too long.
.img-container {
text-align: center;
}
#media (min-height: 60em) {
.img-container {
display: inline-block;
height: 100vh;
width: 100%;
text-align: center;
border: 4px solid green;
}
.img-container img{
height: 100%;
}
}
so if I have this image in my html,
<div class="img-container">
<img src="http://placehold.it/400x850"> <-- a long image height so run the code inside #media
</div>
but if I have this below instead in my HTML,
<div class="img-container">
<img src="http://placehold.it/400x450"> <-- don't run the code inside #media
</div>
In javascript, if you detect the image height is longer than the screen height, then you run the code to scale down the image, while if it detects the image height is smaller than the screen height, then do nothing
Is it possible with css #media?
This is what I get at the moment:
I think this is the answer I am looking for:
.img-container {
height: 100vh;
width: 100%;
display: flex;
align-items: center;
}
.img-container img{
max-height:100%;
margin-left: auto;
margin-right: auto;
}

Give body 100% of the browser height

I have this:
I want this:
I've tried this:
html, body
{
height: 100%; //and this -> 100vh
}
but it didn't works.
Here is my code:
https://jsfiddle.net/zbjaaxe6/9/
Any solutions?
This problem is a good candidate for flexbox:
CSS
body {
display: flex;
flex-direction: column;
margin: 0;
min-height: 100vh; // set min-height instead of height, otherwise body won't
// grow with content, if content is bigger than viewport
}
header {
height: 50px; // adjust to what you want
}
main {
flex: 1; // This will make the 'main' block to expand !
}
footer {
height: 30px; // adjust to what you want
}
HTML
<body>
<header>HEADER</header>
<main>MAIN</main>
<footer>FOOTER</footer>
</body>
Result:
Fiddle
Flexbox is an IE10+ solution. Browser support in detail
"With vw/vh, we can size elements to be relative to the size of the
viewport. The vw/vh units are interesting in that 1 unit reflects 1/100th > the width of the viewport. To make an element the full width of the
viewport, for example, you'd set it to width:100vw."
-- Jonathan Snook, Sizing With CSS3's VW and VH Units
CSS:
[class*="col"] {
border: 1px solid black;
}
#menu{
display:none;
margin-top:20px;
position:absolute;
background: #fff;
z-index: 1;
}
body {
font: caption;
}
#content{
min-height: 90vh;
}
#footer{
min-height: 5vh;
}
#header{
min-height: 5vh;
}
HTML:
<div class="container">
<div class="row">
<!-- Small devices >= 768px Collapsed to start, horizontal above breakpoints -->
<div id = "header" class="col-xs-10"><span id="btnMenu" class="glyphicon glyphicon-menu-hamburger" aria-hidden="true">TITLE</div>
<div id="menu" class="col-xs-3 menu">
MENU
</div>
<div id="content" class="col-xs-10 content">
</span>CONTENT
</div>
<div class="col-xs-10" id = "footer">FOOTER</div>
</div>
</div>
Not ideal, but you could use absolute positioning:
.content {
position: absolute;
top: 20px;
bottom: 0;
}
Or, you could use viewport percentages if you are cool with supporting ie9+:
.content {
height: 100vh;
}
The styles should be on the content section, not the html/body.
EDIT: fiddle
I don't know if that's what you want but take a look :
https://jsfiddle.net/zbjaaxe6/23/
.content{
position: relative;
margin: 0;
min-height: 100vh;
}
I solved your issue using flexbox property.
.container,
.row {
display: flex;
flex-direction: column;
height: 100%;
}
#title,
#footer {
flex: none;
}
#content {
flex: 1 0 auto;
}
You can see here the solution.

Categories