The end goal of this landing page is to have two images side-by-size, both 100% height, but 50% width, maintaining the aspect ratio and hiding the overflow.
This seems like it should be pretty straightforward, but I'm running into nothing but problems with it no matter how I try it.
At this moment I've got the following:
<head>
<link rel="stylesheet" href="Stylesheets/default.css">
</head>
<body>
<div class="page">
<div class="img-wrapper">
<img src="Images/cal-engel-531490-unsplash.jpg">
</div>
<div class="img-wrapper">
<img src="Images/rawpixel-660717-unsplash.jpg">
</div>
</div>
</body>
.page {
width: 100%;
height: 100vh;
white-space: nowrap;
}
.img-wrapper {
position: relative;
}
img {
float: left;
width: 50%;
height: 100vh;
}
This is achieving the height and width goals, but my tinkering so far has not gotten the image to adjust proportionally and tuck the overflow away.
I've searched around and come up with nothing that has solved this so far, apologies if I missed a super-obvious article somewhere. Any help is appreciated!
I would just make them background images. That way you don't have to worry about overflow. Here I'm setting the anchor to 100% width and height (of its container, so 50% of the page each), which appears to be what you wanted. The background-position keeps the left and right images anchored at the top right and top left respectively, and the background-size of cover ensures the aspect ratio is kept intact. Note that if your images are taller than they are wide, this might not have the effect intended.
body {
margin: 0;
}
.page {
width: 100%;
height: 100vh;
font-size: 0;
display: flex;
flex-flow: row nowrap;
justify-content: stretch;
}
.img-wrapper {
flex: 1 1 50%;
}
.img-wrapper a {
display: block;
width: 100%;
height: 100vh;
background-repeat: no-repeat;
}
.img-wrapper:first-child a {
background-image: url(https://picsum.photos/300/200);
background-position: top 0 left 100%;
background-size: cover;
}
.img-wrapper:last-child a {
background-image: url(https://picsum.photos/300/200);
background-position: top 0 right 100%;
background-size: cover;
}
<body>
<div class="page">
<div class="img-wrapper">
</div>
<div class="img-wrapper">
</div>
</div>
</body>
Try adding
.page { overflow: hidden; }
to your code. This should hopefully ensure that any overflowing content is hidden.
You have given width:50% to the image instead of its parent element.
<head>
<link rel="stylesheet" href="Stylesheets/default.css">
<style>
.page {
width: 100%;
height: 100vh;
white-space: nowrap;
}
.img-wrapper {
position: relative;
float: left;
width: 50%;
}
.img-wrapper a {
display: block;
}
img {
width: 100%;
height: 100vh;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="page">
<div class="img-wrapper">
<a href="pol.html">
<img src="Images/cal-engel-531490-unsplash.jpg">
</a>
</div>
<div class="img-wrapper">
<a href="biz.html">
<img src="Images/rawpixel-660717-unsplash.jpg">
</a>
</div>
<div class="clear"></div>
</div>
</body>
Use flex and give its child elements 50% width. Remove the default margin on body. And to remove white space due to images add font-size:0 on the .page div. You can obviously ovverride this font-size later when you have text on this page for that section.
body {
margin: 0;
}
.page {
width: 100%;
height: 100vh;
font-size: 0;
display: flex;
}
.img-wrapper {
width: 50%;
}
img {
width: 100%;
height: 100%;
}
<body>
<div class="page">
<div class="img-wrapper">
<img src="https://picsum.photos/300/200">
</div>
<div class="img-wrapper">
<img src="https://picsum.photos/300/200">
</div>
</div>
</body>
Here is the solution that I reached. The main issue that I was having was that I had assigned width:50% to img instead of the container.
Here are the final(ish) code blocks that are working as intended. Thanks for the suggestions!
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="Stylesheets/default.css">
</head>
<body>
<div class="page">
<div class="img-wrapper-l">
<img src="Images/cal-engel-531490-unsplash.jpg">
</div>
<div class="img-wrapper-r">
<img src="Images/rawpixel-660717-unsplash.jpg">
</div>
<div class="clear"></div>
</div>
</body>
html, body {
height: 100%;
margin: 0;
}
#wrapper {
min-height: 100%;
}
.page {
width: 100%;
max-height: 100vh;
white-space: nowrap;
overflow: hidden;
}
.img-wrapper-l {
height: 100%;
width: 50%;
overflow: hidden;
position: absolute;
float: left;
}
.img-wrapper-r {
height: 100%;
width: 50%;
overflow: hidden;
position: relative;
float: right;
}
img {
height: auto;
width: auto;
max-width: 1200px;
max-height: 1200px;
}
Related
I'm having problem with my div with contenteditable=true which break my whole page.
When you type a lot of text, instead adding scrollbar it make div bigger so it move others parts of the page...
So what I would like my editable div fill remaining width and height of the page but add scrollbar when text being too big whitout moving others elments of the page. Thanks
JsFiddle
HTML
<body>
<h1>TEXT</h1>
<div class="all">
<div class="container">
<div class="lines"></div>
<div class="editor" contenteditable="true" spellcheck="false"></div>
</div>
<div class="manage">
<h1>TEXT</h1>
</div>
</div>
</body>
CSS
html, body {
margin: 0;
padding: 0;
display: flex;
height: 100%;
width: 100%
}
h1 {
margin: 20px;
}
.all {
display:flex;
flex-direction: column;
width: 100%;
height: 100%;
}
.container {
display: flex;
width: 100%;
height: 400px;
overflow: auto;
}
.lines {
background-color: red;
border-radius: 20px 0 0 20px;
height: 100%;
width:40px;
}
.editor {
border-radius: 0 20px 20px 0;
background-color: orange;
width: 100%;
height: 100%;
}
All you need to do is to add a max-width property to your .editor class.
Here is a working code: https://codesandbox.io/s/html-code-editor-forked-g27d9o?file=/index.html
I have a fixed width element that needs to be centered when it fits on the page but if not then extend beyond the page width accessible with page scroll. I've got close to making this work but it overlaps the sidebar.
1/ How can I centre the large-fixed-grid (green element) if it fits inside the container/screen width but if not start it from after the sidebar?
2/ Additionally, if I scroll horizontally to show the fixed width element, the top-header shows a gap with difference between screen width and large-fixed-grid width (red element). Is there a way to offset the top-header inline with the scrolling horizontally so there is no white gap?
The yellow element should still be centred on the original width without scrolling. It currently behaves as expected.
I have tried lots of CSS variations but cannot get this working.
JSFiddle: https://jsfiddle.net/7tg2jo69/
Image:
Html:
<!DOCTYPE html>
<html>
<header class="top-header"></header>
<div class="page">
<div class="sidebar">
<div class="menu">Item1</div>
</div>
<main class="main">
<article class="content">
<div class="container">
<div class="row justify-content-center">
<div class="small-flexible-grid">
</div>
<div class="large-fixed-grid">
</div>
</div>
</div>
</article>
</main>
</div>
</html>
CSS:
.top-header {
height: 40px;
background:red;
}
.sidebar {
z-index: -1;
background:blue;
float: left;
width: 200px;
height: calc(100vh - 3.5rem);
position: sticky;
top: 0;
overflow-y: auto;
}
.main {
margin-left: 200px;
}
.content {
padding: 1.1rem;
}
.container {
max-width: 100%;
}
.row {
display: flex;
flex-wrap: wrap;
}
.justify-content-center {
justify-content: center;
}
.small-flexible-grid {
background: yellow;
width: 60%;
height: 100px;
}
.large-fixed-grid {
background: green;
min-width:600px;
width: 600px;
height: 100px;
}
Update:
I've fixed 1/ by removing class justify-content-center entirely and adding margin: auto; to both .small-flexible-grid and .large-fixed-grid
how about change the styles to
.large-fixed-grid {
background: green;
width: 100%;
max-width: 600px;
height: 100px;
}
Solved both of these using the following
JSFiddle: https://jsfiddle.net/m9wdzgb1/
Html:
<!DOCTYPE html>
<html>
<header id="top-header-onscroll" class="top-header"></header>
<div class="page">
<div class="sidebar">
<div class="menu">Item1</div>
</div>
<main class="main">
<article class="content">
<div class="container">
<div class="row">
<div class="small-flexible-grid">
</div>
<div class="large-fixed-grid">
</div>
</div>
</div>
</article>
</main>
</div>
</html>
CSS:
.top-header {
height: 40px;
background:red;
}
.sidebar {
z-index: -1;
background:blue;
float: left;
width: 200px;
height: calc(100vh - 3.5rem);
position: sticky;
top: 0;
overflow-y: auto;
}
.main {
margin-left: 200px;
}
.content {
padding: 1.1rem;
}
.container {
max-width: 100%;
}
.row {
display: flex;
flex-wrap: wrap;
}
.small-flexible-grid {
background: yellow;
width: 60%;
margin: auto;
height: 100px;
}
.large-fixed-grid {
background: green;
min-width:600px;
width: 600px;
margin: auto;
height: 100px;
}
Javascript:
window.onscroll = function (e) {
var top_header = document.getElementById('top-header-onscroll');
if (top_header) {
if (window.pageXOffset > 0) {
top_header.style.width = (window.innerWidth + window.pageXOffset - 30) + 'px';
}
else {
top_header.style.width = "";
}
}
}
I am starting my approach to CCS and I face my first difficulties.
I have a <div> container and 2 overlaying <div> elements inside the container managed by CSS classes. These three elements are working properly as I want.
But when I add an other element outside the container that I am expecting to show up below the container it overlays on the other elements. I tried to use flexbox instructions but it did not work.
.container {
width: 100%;
position: relative;
}
.box {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0.7;
background: #0057e3;
}
.overlay {
z-index: 9;
width: 20%;
position: absolute;
margin-top: 600px;
margin: 70px;
background: #009938;
}
.imgA {
max-width: 300px;
max-height: 450px;
display: block;
}
<div class="container">
<div class="box"><img src="yyyyyyyyyyyyy"></div>
<div class="box overlay">
<img class="imgA" src="xxxxxxxxxxxxx">
</div>
</div>
<div>
<h1>Why this one overlays?</h1>
</div>
.container does not have a height set and that's where the main problem is happening in your case.
Since there are two absolute positioned divs within your container. The two divs comes out of the normal flow. And your container height stays 0. Since you are not explicitly giving any height to container div.
If you add some height to the container, that will take height in the normal flow and overlay of last div would not happen.
.container {
width: 100%;
position: relative;
left:0;
top:0;
border:1px solid #ccc;
height:400px; /* Added Height */
}
.box {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0.7;
}
.overlay {
z-index: 9;
width: 20%;
position: absolute;
margin: 70px;
}
.imgA {
max-width: 300px;
max-height: 450px;
display: block;
}
<div class="container">
<div class="box overlay">
<img src="https://picsum.photos/200/300"/>
</div
<div class="box overlay">
<img class="imgA" src="https://picsum.photos/200/300"/>
</div>
</div>
<div>
<h1>Why this one overlays?</h1>
</div>
Try this code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
text-align: center;
}
.container {
width: 100%;
position: relative;
/* background-color: #0057e3; */
}
.box {
width: 100%;
/* height: 100%; */
position: absolute;
top: 0;
left: 0;
opacity: 0.7;
background: #0057e3;
}
.box img{
height: 400px;
}
.overlay {
z-index: 2;
/* width: 20%; */
position: relative;
margin-top: 600px;
/* margin: 70px; */
background: #009938;
}
.imgA {
max-width: 300px;
max-height: 450px;
display: block;
}
.section-2{
border: 1px solid #0057e3;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<img src="pic2.JPG">
</div>
<div class="box overlay">
<img class="imgAh" src="pic1.JPG">
</div>
</div>
<div class='section-2'>
<h1>Why this one overlays?</h1>
</div>
</body>
</html>
Scenario :
I am having trouble getting an image to autofit a flexbox with a border around it. The image will be dynamically generated so sometimes the width or the height might be the longer side. Sometimes the image will be smaller or larger than the box it should be in, but it should automatically fit the size of the box and retain its proper proportions.
Tried Case :
The best I've come up with is to set both width and height of the image to 100%, and then use object-fit: contain.
However, object-fit: contain does not work well with borders. Instead of surrounding just the image the border is surrounding the entire parent div.
The Problem: If there is a tall skinny image it might enlarge or shrink to 30% width and 100% height. I would like the border to be also at the 30% and 100% region as well. However, the border is being placed at the 100% width and 100% height area which is not what I want.
What other method would work better for me here?
Here is a simplified look at my code:
<!DOCTYPE html>
<html>
<style>
html, body { width: 100%; height: 100% }
#outer {
width: 100%;
height: 100%;
display: flex;
background-color: green;
flex-direction: column
}
#top, #bottom {
flex: 1;
display: flex;
border: solid black 1px;
}
#first, #third {
flex: 1;
background-color: blue;
}
#second {
flex: 3;
background-color: yellow;
}
#second img {
border: solid black 5px;
object-fit: contain;
width: 100%;
height: 100%;
box-sizing: border-box;
}
</style>
<body>
<div id="outer">
<div id="top">
<div id="first">First</div>
<div id="second">
<img src="https://via.placeholder.com/350x800/faa">
</div>
<div id="third">Third</div>
</div>
<div id="bottom">
Bottom
</div>
</div>
</body>
</html>
If you run the above code snippet you will see the thick border is surrounding the entire parent region (shown in yellow), rather than just appearing around the image itself (pink area).
What can I do so that the border is only around the image itself?
Clarification
I need something that meets the following criteria:
Smaller images are scaled up to meet the size of the parent div
Larger images are scaled down to meet the size of the parent div
Images should be proportional (i.e. images must retain their aspect ratio and not become distorted)
The image should be centered within the parent div
The image should have a border only around the image and not the larger area
Code must work for both portrait and landscape images
In most cases only two sides of the image will touch the parent boundary, leaving the rest of the parent div empty (i.e. the yellow background in my code sample)
I'm actually quite surprised given how far CSS has come that there seems to be no simple solution for this.
Do you want only with height 100%? If not height 100% is depend on image's prop, you can use object-fit: fill; and height:auto;
<!DOCTYPE html>
<html>
<style>
html, body { width: 100%; height: 100% }
#outer {
width: 100%;
height: 100%;
display: flex;
background-color: green;
flex-direction: column
}
#top, #bottom {
flex: 1;
display: flex;
border: solid black 1px;
}
#first, #third {
flex: 1;
background-color: blue;
}
#second {
flex: 3;
background-color: yellow;
}
#second img {
border: solid black 5px;
object-fit: contain;
width: 100%;
height: auto;
box-sizing: border-box;
}
</style>
<body>
<div id="outer">
<div id="top">
<div id="first">First</div>
<div id="second">
<img src="https://picsum.photos/800/800">
</div>
<div id="third">Third</div>
</div>
<div id="bottom">
Bottom
</div>
</div>
</body>
</html>
Used object-fit: cover
so that the image will cover the entire parent.
Other solution will be inserting an image already having a border on it.Image can be edited online to attach a border to itself.
<!DOCTYPE html>
<html>
<style>
html, body { width: 100%; height: 100% }
#outer {
width: 100%;
height: 100%;
display: flex;
background-color: green;
flex-direction: column
}
#top, #bottom {
flex: 1;
display: flex;
border: solid black 1px;
}
#first, #third {
flex: 1;
background-color: blue;
}
#second {
flex: 3;
background-color: yellow;
}
#second img {
border: solid black 5px;
object-fit: cover;
width: 100%;
height: 100%;
box-sizing: border-box;
}
</style>
<body>
<div id="outer">
<div id="top">
<div id="first">First</div>
<div id="second">
<img src="https://via.placeholder.com/350x800/faa">
</div>
<div id="third">Third</div>
</div>
<div id="bottom">
Bottom
</div>
</div>
</body>
</html>
Updated Solution:
So, to achieve this, we can put image inside a container that will be
take height and width according to image. Put this image container div inside the main div container.
So, in this case, we have put the following code into #second conatiner, and adjusted the corresponding css to achieve the desired result.
html, body { width: 100%; height: 100% }
img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
transform: translate(-50%, -50%);
position: relative;
left: 50%;
top: 50%;
}
#testing {
display: inline-block;
/* text-align: center; */
}
#outer {
width: 100%;
height: 100%;
display: flex;
background-color: green;
flex-direction: column
}
#top, #bottom {
flex: 1;
display: flex;
border: solid black 1px;
}
#first, #third {
flex: 1;
background-color: blue;
}
#second {
flex: 3;
background-color: yellow;
display: flex;
margin: 0 auto;
justify-content: center;
}
#second img {
border: solid black 5px;
object-fit: contain;
box-sizing: border-box;
}
<!DOCTYPE html>
<html>
<body>
<div id="outer">
<div id="top">
<div id="first">First</div>
<div id="second">
<div id='testing'>
<img src="https://via.placeholder.com/1000x350/faa">
</div>
</div>
<div id="third">Third</div>
</div>
<div id="bottom">
Bottom
</div>
</div>
<div id="outer">
<div id="top">
<div id="first">First</div>
<div id="second">
<div id='testing'>
<img src="https://via.placeholder.com/350x1000/faa">
</div>
</div>
<div id="third">Third</div>
</div>
<div id="bottom">
Bottom
</div>
</div>
</body>
</html>
did you mean something like this?
changes are, move width: 100% and height: 100% to parent, add max-height: 100% on img, and add text-align: center on parent
update:
- add another div inside #second
- make #second display: flex; flex-direction: column; justify-content: center
- add max-width: 100% to img
- add max-height: 100%; max-width: 100%; height: fit-content; to the added div
html, body { width: 100%; height: 100% }
#outer {
width: 100%;
height: 100%;
display: flex;
background-color: green;
flex-direction: column
}
#top, #bottom {
flex: 1;
display: flex;
border: solid black 1px;
}
#first, #third {
flex: 1;
background-color: blue;
}
#second {
flex: 3;
background-color: yellow;
width: 100%;
height: 100%;
text-align:center;
display: flex;
flex-direction: column;
justify-content: center;
}
#second img {
border: solid black 5px;
box-sizing: border-box;
max-height: 100%;
max-width: 100%;
}
#vcenter{
max-height: 100%;
max-width: 100%;
height: fit-content;
}
<!DOCTYPE html>
<html>
<body>
<div id="outer">
<div id="top">
<div id="first">First</div>
<div id="second">
<div id="vcenter">
<img src="https://via.placeholder.com/350x800/faa">
</div>
</div>
<div id="third">Third</div>
</div>
<div id="bottom">
Bottom
</div>
</div>
</body>
</html>
same code for landscape images
html, body { width: 100%; height: 100% }
#outer {
width: 100%;
height: 100%;
display: flex;
background-color: green;
flex-direction: column
}
#top, #bottom {
flex: 1;
display: flex;
border: solid black 1px;
}
#first, #third {
flex: 1;
background-color: blue;
}
#second {
flex: 3;
background-color: yellow;
width: 100%;
height: 100%;
text-align:center;
display: flex;
flex-direction: column;
justify-content: center;
}
#second img {
border: solid black 5px;
box-sizing: border-box;
max-height: 100%;
max-width: 100%;
}
#vcenter{
max-height: 100%;
max-width: 100%;
height: fit-content;
}
<!DOCTYPE html>
<html>
<body>
<div id="outer">
<div id="top">
<div id="first">First</div>
<div id="second">
<div id="vcenter">
<img src="https://via.placeholder.com/1350x200/faa">
</div>
</div>
<div id="third">Third</div>
</div>
<div id="bottom">
Bottom
</div>
</div>
</body>
</html>
I am using the bootstrap framework, So while constructing a div if I give a height as 32em. It does perfectly fit in one phone, but when chosen the bigger size. The div does not occupy the remaining height in the bottom. How to make it occupy the remaining height in the bottom if the phone is changed?
Note that div is under the fluid-container and is the last div in that container. And code is something like this.
<style>
.box{
height: 32em;
background: grey;
}
</style>
<div class="container-fluid">
<div class="row box"></div>
</div>
What about this demo
<link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<body>
<div class="navbar navbar-fixed-top">
<!-- Rest of nav bar chopped from here -->
</div>
<div class="container fill">
<div id="map"></div> <!-- This one wants to be 100% height -->
</div>
</body>
#map {
width: 100%;
height: 100%;
min-height: 100%;
background: red;
display: block;
}
html, body {
height: 100%;
}
.fill {
min-height: 100%;
height: 100%;
}
Please, check the snippet below
.container-fluid {
height: 150px;
background-color: red;
width: 100%;
overflow: hidden;
}
.box {
height: 100%;
background-color: blue;
width: 50%;
display: block;
}
.small-box {
width: 75%;
height: 50px;
background-color: green;
}
<div class="container-fluid">
<div class="small-box"></div>
<div class="box"></div>
</div>
One more solution is here
html, body {
height: 100%;
margin: 0px;
}
.container-fluid {
display: table;
width: 100%;
height: 100%;
}
.row {
display: table-row;
width: 100%;
}
.box {
display: table-cell;
background: grey;
}
<div class="container-fluid">
<div class="row box">
</div>
</div>
You can also find this solution in myblog