I have this example where I wanted to demonstrate my problem: https://codepen.io/Kapaak/pen/oNBbgad
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
position: relative;
min-height: 100vh;
height: 100vh;
background-color: #01383a;
display: flex;
align-items: center;
justify-content: center;
color: #f5c1a0;
font-size: 3rem;
}
.wrapper h2 {
z-index: 1;
}
.wrapper .image {
width: 10rem;
position: absolute;
}
.wrapper .image.bottom-left {
bottom: 4rem;
left: 4rem;
}
.wrapper .image.top-right {
top: 4rem;
right: 4rem;
}
.wrapper .image img {
width: 100%;
}
<div class="wrapper">
<h2>Some random headline text</h2>
<div class="image top-right">
<img src="https://images.unsplash.com/photo-1611412570995-ed61b6e2f098?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxNjY4NTk1Nw&ixlib=rb-1.2.1&q=85" alt="">
</div>
<div class="image bottom-left">
<img src="https://images.unsplash.com/photo-1611412570995-ed61b6e2f098?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxNjY4NTk1Nw&ixlib=rb-1.2.1&q=85" alt="">
</div>
</div>
I am trying to make some page, where will be some interactive images, that will be positioned somewhere on the page, just like the cats in the codepen. The problem is that when you resize window, they will always retain the same position.
What I want is to give them lets say max-width:900 and when I have smaller width they wont move, they will just overflow the page and I want the headline to be centered, thats why I gave the images position:absolute
The reason your right image is moving when you resize the browser is because you made it absolute compared to the right edge with right: 4rem;. If you change that value to say left: 104rem; then it will always be positioned 104 rem from the left edge of the window, regardless of the window width.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
position: relative;
min-height: 100vh;
height: 100vh;
background-color: #01383a;
display: flex;
align-items: center;
justify-content: center;
color: #f5c1a0;
font-size: 3rem;
}
.wrapper h2 {
z-index: 1;
}
.wrapper .image {
width: 10rem;
position: absolute;
}
.wrapper .image.bottom-left {
bottom: 4rem;
left: 4rem;
}
.wrapper .image.top-right {
top: 4rem;
left: 104rem;
}
.wrapper .image img {
width: 100%;
}
<div class="wrapper">
<h2>Some random headline text</h2>
<div class="image top-right">
<img src="https://images.unsplash.com/photo-1611412570995-ed61b6e2f098?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxNjY4NTk1Nw&ixlib=rb-1.2.1&q=85" alt="">
</div>
<div class="image bottom-left">
<img src="https://images.unsplash.com/photo-1611412570995-ed61b6e2f098?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxNjY4NTk1Nw&ixlib=rb-1.2.1&q=85" alt="">
</div>
</div>
Your best bet would be to either use Bootstrap columns (https://getbootstrap.com/), as these dynamically resize images/text in columns. Or you can use the following css to keep the same position.
#image {
width:100%;
height:100%;
margin-left:50%;
margin-right:50%;
position:absolute;
}
If you need to resize images when the page size is decreased you can use media queries in CSS. These can also be used to change the properties of any element for any screen size.
if you want your title always be centered use
text-align: center;
on your h2 element
Related
I'm trying to make my images stick to the navbar at the top. When I make the tab smaller, the pictures have a noticeable gap. I want to get rid of this gap before I start aligning the pictures vertically for phone usage.
I have managed to make it responsive horizontally, but the gap is bugging me a lot. I could just add a black background to hide it, but I feel like that takes away from it.
When I'm gonna make it more responsive, I'm going to use media queries, I wonder if that could solve the issue, but I don't think it would.
Any ideas on how this could be solved?
#charset "utf-8";
/* CSS Document */
*{
margin: 0;
padding: 0;
overflow-x: hidden;
}
.navbox {
position: absolute;
width: 100%;
height: 15vh;
background-color: #271f30;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 9999;
}
.navbox img {
height: 10vh;
}
.home {
width: auto;
height: 75px;
}
.bildspel {
}
.arrowleft {
width: 60px;
height: 60px;
}
.arrowright {
width: 60px;
height: 60px;
}
.tre {
height: 90vh;
width: 99vw;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: space-between;
}
.tre img {
width: calc(100vw / 3);
aspect-ratio: 1/1.75;
transition: 0.3s ease-in-out;
cursor: pointer;
}
.tre img:hover {
transform: scale(1.15)
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>The Witcher - Streaming on Netflix</title>
<link href="seessess.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="navbox">
<div></div>
<a href="index.html">
<img class="home" src="witcherlogo.png" alt="Logo">
</a>
<div></div>
</div>
<div class="tre">
<img src="Crop2.png" onClick="location.href='index.html'">
<img src="Crop1.png" onClick="location.href='index.html'">
<img src="Crop3.png" onClick="location.href='index.html'">
</div>
</body>
</html>
The gap happens because your vh calculations don't add up. You can fix it by removing height: 90vh; from .tre so it will always stick to the nav bar.
It also helps to put your three images in a div, so you can use flex more easily. (the images are always 100% of their flex div container)
I added a media query to put the images under each other on a small screen.
*{
margin: 0;
padding: 0;
}
.navbox {
width: 100%;
height: 15vh;
background-color: #271f30;
display: flex;
align-items: center;
justify-content: space-between;
}
.navbox img {
height: 10vh;
}
.tre {
display: flex;
align-items: center;
justify-content: space-between;
}
.tre div {
overflow:hidden;
}
.tre img {
transition: 0.3s ease-in-out;
cursor: pointer;
width:100%;
}
.tre img:hover {
transform: scale(1.15)
}
#media (max-width:300px) {
.tre {
flex-direction:column;
}
}
<div class="navbox">
<div></div>
<a href="index.html">
<img class="home" src="https://cataas.com/cat" alt="Logo">
</a>
<div></div>
</div>
<div class="tre">
<div>
<img src="https://cataas.com/cat">
</div>
<div>
<img src="https://cataas.com/cat">
</div>
<div>
<img src="https://cataas.com/cat">
</div>
</div>
So I have this markup and inside it there is <div class="mask"></div> which sets the blue overlay ontop of the image.
If I don't make the .container position:relative, the title text gets hidden behind the blue layer... Almost as if it's usage is mimicking z-index
Why is this the case?
Pen: https://codepen.io/anon/pen/OBbbZB
body {
margin: 0;
font-family: arial;
}
section {
position: relative;
background: url(https://preview.webpixels.io/boomerang-v3.6.1/assets/images/backgrounds/slider/img-41.jpg)
no-repeat left center/cover;
height: 70vh;
display: flex;
justify-content: center;
}
.container {
position: relative;
width: 100%;
max-width: 1280px;
display: flex;
justify-content: center;
align-items: center;
color: white;
}
.mask {
position: absolute;
width: 100%;
height: 100%;
background: #3452ff;
opacity: 0.7;
}
<section>
<div class="mask"></div>
<div class="container">
<h1>Hello World</h1>
</div>
</section>
You need to refer to the specification and more precisely the painting order to understand when each layer is painted.
Without position:relative your element is not positioned and will be painted at the step (4):
For all its in-flow, non-positioned, block-level descendants in tree
order: If the element is a block, list-item, or other block
equivalent:
Then we paint the positioned elements (including the .mask) at the step (8)
All positioned, opacity or transform descendants, in tree order that fall into the following categories
Now when you add position:relative you make the container also positioned thus it will fall in the step (8) too and as described there we consider the tree order since both don't have any z-index specified. So the .container will painted later in this case.
If you change the order of the element (you make the container before the mask) you will notice that position:relative won't have any effect because in both cases the painting order will be the same:
body {
margin: 0;
font-family: arial;
}
section {
position: relative;
background: url(https://preview.webpixels.io/boomerang-v3.6.1/assets/images/backgrounds/slider/img-41.jpg)
no-repeat left center/cover;
height: 70vh;
display: flex;
justify-content: center;
}
.container {
position: relative; /* you can remove this*/
width: 100%;
max-width: 1280px;
display: flex;
justify-content: center;
align-items: center;
color: white;
}
.mask {
position: absolute;
width: 100%;
height: 100%;
background: #3452ff;
opacity: 0.7;
}
<section>
<div class="container">
<h1>Hello World</h1>
</div>
<div class="mask"></div>
</section>
If we check the step (8) it also said opacity or transform which means that if you also change the opacity of the container or add a transform, the order will change too.
body {
margin: 0;
font-family: arial;
}
section {
position: relative;
background: url(https://preview.webpixels.io/boomerang-v3.6.1/assets/images/backgrounds/slider/img-41.jpg)
no-repeat left center/cover;
height: 70vh;
display: flex;
justify-content: center;
}
.container {
transform:translate(0); /*added this*/
width: 100%;
max-width: 1280px;
display: flex;
justify-content: center;
align-items: center;
color: white;
}
.mask {
position: absolute;
width: 100%;
height: 100%;
background: #3452ff;
opacity: 0.7;
}
<section>
<div class="mask"></div>
<div class="container">
<h1>Hello World</h1>
</div>
</section>
It's also trivial to notice that if you add z-index (either negative or positive) you will also affect the painting order and in this case the tree order will have no effect.
Stacking contexts formed by positioned descendants with negative z-indices (excluding 0) in z-index order (most negative first) then tree order
....
Stacking contexts formed by positioned descendants with z-indices greater than or equal to 1 in z-index order (smallest first) then tree order.
We paint the element with negative z-index at (3) and the positive ones at (9) and between those steps we have all the cases where z-index is not involved like described initially.
This is a fascinating question. It appears that when the .mask div is made absolute and taken out of the document flow, it's the positions that are affected, but the stacking order of the elements is still in place. So an element placed before the absolute div appears under the div, and an element placed after the absolute div is stacked after.
This isn't really an answer, I just wanted to demo what I looked at:
body {
margin: 0;
font-family: arial;
}
section {
position: relative;
background: url(https://preview.webpixels.io/boomerang-v3.6.1/assets/images/backgrounds/slider/img-41.jpg) no-repeat left center/cover;
height: 70vh;
display: flex;
justify-content: center;
}
.container0 {
width: 100%;
max-width: 1280px;
display: flex;
justify-content: center;
align-items: center;
color: white;
}
.container {
position: relative;
width: 100%;
max-width: 1280px;
display: flex;
justify-content: center;
align-items: center;
color: white;
}
.mask {
position: absolute;
width: 100%;
height: 100%;
background: #3452ff;
opacity: 0.7;
}
<section>
<div class="container0">
<h1>Another Hello World</h1>
</div>
<div class="mask"></div>
<div class="container">
<h1>Hello World</h1>
</div>
</section>
I have replicated a gallery carousel in netflix style.
The problem is that images don't scale outside their parent element when I hover them.
<section id="section1">
//I have actually much more images here that overflow horizontally the screen.
<img src="https://occ-0-2007-1168.1.nflxso.net/dnm/api/v6/X194eJsgWBDE2aQbaNdmCXGUP-Y/AAAABVypZKpbeCTdH_RiIUNhK-H_kNm_qvlA_43XPwJXpvme9IwH3o2gnHlWx9sPgX8A8N_m9s5OVW_zHiEHVacerrBlzuAfoAl_9ppM9nbpVIiDbgv2tmeAaBV55-H8.jpg?r=c94" alt="">
<img src="https://occ-0-2007-1168.1.nflxso.net/dnm/api/v6/X194eJsgWBDE2aQbaNdmCXGUP-Y/AAAABaArrKSNeknqjF6J-wz8_dI_ATA6BpmxR7FGuNwY5NpWy3X6AMupA-63bXbqjIaoztw9tsYDb9X7iCJt6R_xOxNVdKnpGfWwJ_E7WXFJUm32FWIMScuA_3bNf5sV.jpg?r=993" alt="">
</section>
css:
#section1 {
width: 100%;
display: flex;
align-items: center;
position: relative;
overflow-x: hidden;
}
.wrapper section img{
width: 15.2vw;
margin: auto;
margin-left: 0.5rem;
border-radius: 1rem;
}
img:hover {
transform: scale(1.2);
overflow: visible;
position: relative;
z-index: 50;
}
Background
I am trying to make a div where an image is on one end with a text portion on the other (taking up the rest of the available space). The image is sized relative to the window width and the text is center-aligned within the space available.
Also, the image has icons that are absolutely positioned on it, relative to it's size.
You can test it for yourself here
HTML:
<div id="previousVideo" onclick="backVideo();" title="Back">
<div class="videoNameContainer">
<p class="videoName"></p>
</div>
<div class="videoImageContainer">
<div class="videoImageWrapper">
<img class="videoImage" src="" />
<span class="fa fa-backward"></span>
<p class="videoTime"></p>
</div>
</div>
</div>
CSS:
#previousVideo,
#nextVideo {
display: flex;
padding: 5px;
width: 25%;
height: 40%;
cursor: pointer;
}
.videoNameContainer {
width: 100%;
display: flex;
align-items: center;
height: 100%;
justify-content: center;
}
.videoImageContainer {
height: 100%;
display: flex;
width: 40%;
align-items: center;
}
.videoImageWrapper {
width: 100%;
max-height: 100%;
display: flex;
position: relative;
}
.videoName {
margin: 0;
max-height: 100%;
overflow: hidden;
background-color: white;
}
.videoTime {
position: absolute;
bottom: 0;
right: 3px;
color: white;
margin: 0;
font-size: 0.8em;
}
#previousVideo .videoNameContainer {
margin-right: 5px;
}
#previousVideo .videoImageContainer {
margin-left: auto;
}
.fa-backward, .fa-forward {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
Question
Upon resizing the window of Firefox, the image resizes and everything follows the CSS.
Yet, doing the same on Chrome, the image does not resize at all:
Why is this happening? Thanks ahead!
UPDATE:
On adding width:100% to the image, Chrome does not maintain the aspect ratio of the image:
you container is resizing, but the img is overflowing.
You need to add width:100% to your img, so it resizes to whatever width the container has.
.videoImage{
width:100%;
height:100%;
}
It seems in the absense of a width declaration for the image itself, Firefox is resizing the img to the container, while Chrome is just keeping the image actual width.
I'm trying to find a way to do the following:
Have 2 divs, each with an image as a child element, each 50% width of current viewport
Scale each of these two divs in a 1:1 aspect ratio, and let the image inside each of them fill as good as possible
Never make the divs larger (width or height) so that we get scrollbars in our browser..
Am I asking for the impossible? Or is there a way to do this in css?
For example, let's say I have viewport of 1800x700 px. That would mean each of my columns would have dimensions of 900x900 if run the code below. But my viewport is only 700px heigh = I get scrollbars..
.columns-ratio-slide-container{
background-color: green;
position: relative;
height: 100%;
.col-container{
width: 50%;
padding-top: 50%;
position: relative;
float: left;
#include debug();
.half{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
img{
display: block;
max-height: 100%;
&.landscape{
width: 100%;
height: auto;
}
}
}
}
}
HTML structure:
<div class="columns-ratio-slide-container">
<div class="col-container">
<div class="half">
<img src="https://placeholdit.imgix.net/480x640">
</div>
</div>
<div class="col-container">
<div class="half">
<img src="https://placeholdit.imgix.net/640x320">
</div>
</div>
</div>
See this image if that helps...
You can use 50vw and 100vh to get what you want. Here is an example code snippet:
EDIT: use flex layout to put 2 divs in horizontal center place and update the jsfiddle. Also, describe how to deal with header and footer.
*
{
margin:0;padding:0;
}
.parent {
display: flex;
justify-content: center;
}
div.container
{
width: 50vw;
height: 50vw;
max-height: 100vh;
max-width: 100vh;
background-size: contain;
background-repeat: no-repeat;
background-position: 50%;
}
.container1 {
background-color: red;
background-image: url('https://img3.doubanio.com/lpic/s4554820.jpg');
}
.container2 {
background-color: green;
background-image: url('http://pagead2.googlesyndication.com/simgad/10067268081911489671');
}
<div class="parent">
<div class="container1 container"></div>
<div class="container2 container"></div>
</div>
A jsfiddle is also made. You can adjust the view area's width/height, these 2 divs' aspect ratio are always 1:1, and no scrollbar will appear.
If header or footer is needed, you can use calc() on max-height and max-width, such as:
max-height: calc(100vh - 80px); // 80px is the sum of header height and footer height.
max-width: calc(100vh - 80px);
You can use the "display: table-row" and "display: table-cell"
.columns-ratio-slide-container {
background-color: green;
position: relative;
height: 100%;
display: table-row;
}
.col-container{
width: 50%;
position: relative;
display: table-cell;
vertical-align: middle;
}
.col-container img{
display: block;
max-height: 100%;
width: 100%;
height: auto;
}
<div class="columns-ratio-slide-container">
<div class="col-container">
<div class="half">
<img class="landscape" src="http://placehold.it/480x640">
</div>
</div>
<div class="col-container">
<div class="half ">
<img class="landscape" src="http://placehold.it/640x320">
</div>
</div>
</div>