I have a picture that should be at 100% of the pc screen, but when I use 100vh the elements start to adapt and the elements roll off.
Using height: 100% makes the image too big and doesn't look like it was originally.
Is it possible to somehow get the value 100vh once, and then it would be unchanged?
.main_page {
position: absolute;
width: 100%;
height: 100%;
background-color: black;
}
<div class="main_page">
<!-- Black wallpaper-->
<div class="black_opacity">
<!-- Main wallpaper -->
<div class="main_wallpaper">
<img src="https://cdn.discordapp.com/attachments/797132503546069002/1045624974016262234/2801907.jpg" alt="">
</div>
<!-- Main wallpaper end -->
</div>
<!-- Black wallpaper end-->
<!-- Book-->
<div class="book_cover">
<img src="https://cdn.discordapp.com/attachments/797132503546069002/1046492404011782164/20221127_144830.png" alt="">
</div>
<div class="book_info">
<h1> name... </h1>
<h2> description...</h2>
</div>
<div class="button_div">
<button class="book_buttons" id="Buy"> buy at 2.50$</button>
<button class="book_buttons" onclick="read_click()"> Read book</button>
</div>
</div>
I've tried to use javascript, but I didn't get any response from html. It didn't take a screen value.
First of all, the class name in HTML is written as main_wallpaper but in CSS it's .main_page so you need to rename one of them so they match. There are a few ways you can achieve full height and screen. I like one of CSS-Tricks version of how to do this.
In the HTML:
<div class="main_wallpaper">
<img class="main_img" src="https://cdn.discordapp.com/attachments/797132503546069002/1045624974016262234/2801907.jpg" alt="">
</div>
In CSS:
.main_wallpaper {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
.main_img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
Related
In col-2, I am trying to center the "WHAT" text over the image.
<div class="row">
<div class="col-2">
<div class="stackParent">
<img class="stack-Img" src="img/base.png">
<div class="stack-Txt">
<div class="fourWsText stack-Txt-child">WHAT</div>
</div>
</div>
</div>
<div class="col-10">
...Variable length content...
</div>
</div>
As we resize the browser, the row height will change so that everything in col-10 fits. I am using object-fit:contain to keep the image proportions correct. I need the "stack-Txt" div to resize with the image so that the text will stay centered over the image
Or maybe you know of a better way to achieve this?
Current Idea:
Put WHAT in another child div, make flex, center text with justify-content/align-items
&
JS addEventListener to window resize, get the img div and set nextSibling size equal to this.
These were the css classes at some point... but the only important thing is that the img doesn't overflow the col-2 or the height (which is variable based on the length of col-10)
.stackParent {
position: relative;
object-fit: contain;
max-width: inherit;
height: 20vh;
}
.stack-Txt {
position: absolute;
text-align: center;
width: 100%;
max-height: 15vh;
min-height: 15vh;
z-index: 4;
}
.stack-Txt-child {
}
.stack-Img {
position: absolute;
object-fit: contain;
max-width: inherit;
min-height: 15vh;
max-height: 15vh;
top: 0%;
left: 0%;
z-index: 3;
}
*Note: I also have media queries to resize text, but this shouldn't make a difference.
If you are using Bootstrap 5 you can just use the built-in classes to achieve so.
Apply .position-relative to the main div parent
Apply .img-fluid to <img /> to make image responsive
Apply .position-absolute, .top-50, .start-50, translate-middle to stack-Txt to center it vertically and horizontally over the image.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="row">
<div class="col-2">
<div class="stackParent position-relative">
<img class="stack-Img img-fluid" src="https://source.unsplash.com/random">
<div class="stack-Txt position-absolute top-50 start-50 translate-middle">
<div class="fourWsText stack-Txt-child text-white">WHAT</div>
</div>
</div>
</div>
<div class="col-10">
...Variable length content...
</div>
</div>
If you don't, just edit your CSS as follow:
.stackParent {
position: relative
}
/* make image responsive */
.stack-Img {
max-width: 100%;
height: auto;
}
.stack-Txt {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: white;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="row">
<div class="col-2">
<div class="stackParent">
<img class="stack-Img" src="https://source.unsplash.com/random">
<div class="stack-Txt">
<div class="fourWsText stack-Txt-child">WHAT</div>
</div>
</div>
</div>
<div class="col-10">
...Variable length content...
</div>
</div>
The text "what" is in center over the image in any screen resolution.
.stackParent{
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}
.stack-Img{
position: absolute;
margin: 0;
min-height: 15vh;
max-height: 15vh;
}
.stack-Txt{
z-index: 99;
}
<div class="row">
<div class="col-2">
<div class="stackParent">
<img class="stack-Img" src="img/base.png">
<div class="stack-Txt">
<div class="fourWsText stack-Txt-child">WHAT</div>
</div>
</div>
</div>
<div class="col-10">
...Variable length content...
</div>
</div>
I want to create a web site that contains a network graph. I used vis.js for this. If you hover over an image of a person the image should flip and show some information on the background. I created a JavaScript file that creates a tree out of a json file dynamically. Here is a picture of the result:
As you can see the images are visible outside the box which should not be the case. They should not be displayed outside of the borders.
Here is my html-code:
<div id="fullpage">
<div class="section " id="section0">
...
</div>
<div class="section" id="section1">
...
</div>
<div class="section" id="section2">
<div class="intro">
...
</div>
<div id="media">
...
</div>
</div>
<div class="section active" id="section3">
<div class="slide" id="slide1">
<div id="network_container_1">
<div id="network"></div>
</div>
</div>
<div class="slide active" id="slide2">
<div id="network_container_2">
</div>
</div>
</div>
Here is the CSS:
#network{
width: 100%;
height: 100%;
left: 0;
top: 0;
}
#network_container_bewohner{
width: 100%;
height: 100%;
left: 0;
top: 0;
border:1px black solid;
}
#network_container_freunde{
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.overlay {
position: absolute;
padding: 4px;
z-index: 0;
}
#slide1{
z-index:0;
}
#slide2{
z-index:1;
}
The images are located as #block1, #block2, #block3, etc. as class overlay inside of #network_container_1.
As you can see I tried to mess around with the z-index but it doesn't work.
Okay I found the solution. The problem was the absolute position.
See here: Position absolute and overflow hidden
I would like to have a container and set the background image for the container.
This container must be resizable when resizing the window.
Inside that container there are set of divs which have absolute positions and different z-indexes and assemble an snapshot of a car.
by re-sizing the window this bike also should re-size and stay in the center of that container.
<div class="col-lg-8 left-panel">
<div class="resizable-container">
<div class="resizable-wrapper">
<div style="position: absolute; top: 0px; width: 100%; height: 0px;">
<img src="...."/>
</div>
<div style="position: absolute; top: 0px; width: 100%; height: 0px;">
<img src="...."/>
</div>
<div style="position: absolute; top: 0px; width: 100%; height: 0px;">
<img src="...."/>
</div>
</div>
</div>
</div>
.resizable-container{
width: 100%;
min-height: 400px; (this height also should be resizable)
background: url('background.jpg');
}
.resizable-wrapper{
position: relative;
height: 100%;
/* margin: 0px auto; */
top: -59px; (I have to do this to make the image position centered)
left: -19%; (I have to do this to make the image position centered)
}
Can you guys help me please to achieve this? Do I need to write some script to set the height, top and left or I can do this purely using CSS. In both way I need your help. Thanks
here is the Jsfiddle https://jsfiddle.net/7dsggjpo/3/
I am trying to use Jssor Slider, I copy a demo and it works fine.
While after I try to move the inline css into a separate css file, the bullet navigator displays at the top of the slider instead of at the bottom.
This is my original html with inline css:
<div id="slider_container" style="top: 0px; left: 0px; width: 1179px; height: 582px;">
<!-- Slides Container -->
<div u="slides">
<div><img u="image" src="image/home-banner/logo.jpg"/></div>
<div><img u="image" src="image/home-banner/getup.jpg"/></div>
<div><img u="image" src="image/home-banner/onroad.jpg"/></div>
<div><img u="image" src="image/home-banner/atbed.jpg"/></div>
</div>
<!--arrow navigator-->
<span u="arrowleft" class="slider-arrowl" style="width: 50px; height: 50px;left: 8px"></span>
<span u="arrowright" class="slider-arrowr" style="width: 50px; height: 50px;right: 8px"></span>
<!-- bullet navigator container -->
<div u="navigator" class="slider-bullet" style="position: absolute; bottom: 16px; right: 6px;">
<!-- bullet navigator item prototype -->
<div u="prototype" style="POSITION: absolute; WIDTH: 16px; HEIGHT: 16px;"></div>
</div>
</div>
After I move the style to a css file :
div#slider_container{
position: relative;
margin: auto;
margin-top: 40px;
padding: 10px;
top: 0px; left: 0px; width: 1179px; height: 582px; display: block
}
Jssor slider will duplicate 'outer container' and 'slides' container while initialize. And it will remove id attribute from duplication.
Duplicate 'outer container' is to scale the slider.
Duplicate 'slides' container is for slideshow purpose.
I see.
Please replace
<div id="slider_container"
with
<div id="slider_container" class="slider_container"
And replace
div#slider_container {
with
div.slider_container {
I have four images that should be aligned like so:
____________
|1 |4 |
|_____| |
|2 |3 | |
|__|__|______|
They need to have no space between them, are 100% of the viewport's width, and, here's the kicker, they need to be responsive.
So my question is, what are best practices to do something seemingly simple like this? Use img tags and size the images exactly (before upload)? Use background images and size them with CSS, then resize them on page resize with JS? Some other way?
I should say that I'm using Boostrap 3 with rows and columns to do this, but wasn't able to make the column heights a percentage height.
Thanks!!
One option is to create a responsive wrapper, set the wrapper to be relatively positioned, and then absolutely position the children of the wrapper.
I just tested this and it worked great. I set my body to 100% height and width, and then the wrapper to 50% of that. On browser resize, the wrapper shrinks, and so do the images, all while maintaining their aspect ratio and positioning in the group.
CSS:
.wrapper {
position: relative;
padding-bottom: 50%;
width: 50%;
}
.one, .two, .three, .four {
position: absolute;
}
.one {
width: 50%;
left: 0;
top: 0;
}
.two {
width: 25%;
bottom: 0;
left: 0;
}
.three {
width: 25%;
bottom: 0;
left: 25%;
}
.four {
width: 50%;
bottom: 0;
right: 0;
top: 0;
}
HTML:
<div class="wrapper">
<img src="../images/one.jpg" class="one">
<img src="../images/two.jpg" class="two">
<img src="../images/three.jpg" class="three">
<img src="../images/four.jpg" class="four">
</div>
You could use the Bootstrap grid modified with CSS and make sure natural widths and heights of the images add up correctly:
DEMO: https://jsbin.com/caramo
HTML
<div class="container">
<h2>Flush Grid</h2>
<div class="row flush-grid">
<div class="col-sm-6">
<img src="http://lorempixel.com/600/400/fashion" alt="">
<div class="row flush-grid">
<div class="col-xs-6"><img src="http://lorempixel.com/300/400/food" alt="" ></div>
<div class="col-xs-6"><img src="http://lorempixel.com/300/400/city" alt="" ></div>
</div>
</div>
<div class="col-sm-6 row">
<div class="col-xs-12">
<img src="http://lorempixel.com/600/800/city" alt="" >
</div>
</div>
<!--/.row.flush-grid -->
</div>
<!--/.container-->
CSS
/* Flush Grid */
.row.flush-grid img {
width: 100%;
height: auto;
float:left;
}
.row.flush-grid {
margin-left: 0;
margin-right: 0;
}
.row.flush-grid [class*="col-"] { padding:0;}
.row.flush-grid [class*="col-"].row { padding:0;margin:0;}