How may I display two images on a website with elastic layout, side by side which will autoscale to 50% of parent containter?
I was playing with it last night but didnt went too far.
When I went with divs, they overlaped each other or second image was displayed underneath first.
When I went with table, table become wider than screen resulting in vertical scroll bar.
I dont know in advance what size image is, nor what resolution user is having, idealy I would set this up purely by css, without using javascript.
I had luck on other page with single image autoscaling to fit in container by setting max-width:90% but I can't apply this trick here. Funny thing is, it this scenario max-width is set according to window (parent element), while in examples above max-width is set according to width of image itself.
Sorry for my english, if something is not clear, please ask.
Thanks
I see what you're saying. I had a problem with them being just a little bit too wide, so I took a little off of the margin, since it wouldn't take a fraction in the percent sign. See if this will do the trick:
<html>
<head>
<style>
div {
width: 80%;
background: #acf;
}
div img {
width: 50%;
padding: 0;
margin: 0 -0.2em 0 0;
}
</style>
</head>
<body>
<div>
<img src='a.jpg' />
<img src='b.jpg' />
</div>
</body>
</html>
Edit: Or even better, if all you have are the images in the box, don't let it wrap at all:
<html>
<head>
<style>
div {
width: 80%;
background: #acf;
white-space: nowrap;
overflow: visible;
}
div img {
width: 50%;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div>
<img src='a.jpg' /><img src='b.jpg' />
<!-- Don't put a space between the images. -->
</div>
</body>
</html>
Related
I'm learning CSS and got stuck creating a layout that contains a header and an image that fills the rest of the screen. Using the following code, I'm able to achieve what I'm looking for:
html, body {
height: 100%;
margin: 0;
}
.container {
display: flex;
flex-direction: column;
height: 100%;
}
.image-container {
flex: 1;
}
img {
width: 100%;
height: 100%;
object-fit: contain;
}
<html>
<body>
<div class="container">
<div class="header">
<h1>Test Page</h1>
</div>
<!-- <div class="image-container"> -->
<img src="https://picsum.photos/500/300"/>
<!-- </div> -->
</div>
</body>
</html>
Now the problem is that I want to wrap the image element into a div as I'd like to position an overlay on top of the image. As soon as I nest the img within a div, the resizing doesn't work properly anymore. If the screen is wide, the image overflows to the bottom, creating a vertical scrollbar.
I've tried a lot of things, but nothing's worked so far. Can you explain to me why introducing the div (image-container) changes the layout and how to make it behave like the version without the div? That'd be great, thanks in advance!
EDIT:
I want the image to be displayed exactly like in the snippet I posted. It should be as large as possible, but only so large that the whole image is still visible and nothing is cropped. For a wide window, there should be blank bars left and right of the image. For a narrow but tall window, there should be blank bars above/beyond the image.
My issue is that as soon as I add the <div class="image-container">, the image always takes the whole width. For a wide window, I get scrollbars and can't see the whole image anymore. I'd like to know how I can get the image to scale like in the version without the additional <div>. I'd also like to understand why adding the <div> changes how the image is scaled.
EDIT 2:
Someone suggested to add overflow: hidden; on .image-container, but deleted their answer. This does in fact work (overflow: hidden/scroll/auto; work, overflow: visible; does not), but now I'm completely confused to why that's the case. I thought that overflow would control if overflow is visible, but wouldn't affect the size of the content being displayed. In this case though, it seems like the overflow property does have an effect on the size of the picture being displayed. That's weird and if anyone knows what's going on, please let me know!
Flex is already helping the image take up as much space as possible, so the height: 100% and width: 100% were causing the image to grow.
For getting something to appear on top of the image, I would recommend looking into position: absolute or position: relative
html,
body {
height: 100%;
margin: 0;
}
.container {
display: flex;
flex-direction: column;
height: 100%;
}
.image-container {
display: flex;
justify-content: center;
}
img {
object-fit: contain;
}
<html>
<body>
<div class="container">
<div class="header">
<h1>Test Page</h1>
</div>
<div class="image-container">
<img src="https://picsum.photos/500/300" />
</div>
</div>
</body>
</html>
I have quite an annoying problem, for which I don't seem to be able to find an easy fix. Consider the following HTML:
<html>
<body>
<div id="page">
<!-- Some HTML here -->
<div id="menu"><!-- Some stuff here --></div>
<!-- Some HTML here -->
</div>
</body>
</html>
With the following CSS:
body {
text-align: center;
}
#page {
margin: 0px auto;
max-width: 1200px;
}
#menu {
width: 100%;
padding: 0px 2000px;
margin-left: -2000px;
}
This would give a centered page div, with a menu bar in there. Thing is, whenever the browser width becomes > 1200px, the div will not grow any further, but the menu div must at all times stretch all the way to the window edges. And the problem with this approach now is, that I get a horizontal scrollbar because the menubar is bigger than the screen. So, I am looking for a solution for this. Something that disables the scrollbar from having impact on the horizontal scrollbar would do. Disabling the horizontal scrollbar isn't an option however, since the content must be scrollable on small devices as well...
I am aware that I could fix this by pulling the menu bar outside of the page div, but that is hard, since I am editing a Drupal theme and I want this change to have as little impact as possible.
Thanks in advance for any suggestions!
What you mean is that you want the div to stay 100% width all the way but to have scrolling inside of it? If so then you should have a wider div inside the main div.
Something like this-
<div id="full-width">
<div id="scrolling-div">
</div>
</div>
<style type="text/css">
#full-width {
float:left;
width:100%;
height:500px;
overflow-x:visible;
}
#scrolling-div {
float:left;
width:300%;
height:500px;
}
</style>
I tested this code, it works :)
You can easy fix this by setting your html and body styling like this:
html, body {
overflow-x:hidden;
}
body {
margin: 0;
}
This should do it with the current code you have now.
I have a large image file (3838x1049) generated from a dual screen screenshot and I need to create 2 HTML files with each file displaying one half of the image.
I was able to achieve that by using the background sprites and specifying the portion of the image I want to see.
The problem is that the image is displayed in its original size which is larger than a typical monitor resolution. I need it to resize automatically to fit the screen while preserving the aspect ratio.
Can anyone help ?
Here is my current code for displaying the right portion of the image:
<html>
<head>
<style>
img.home {
width: 1899px;
height: 1020px;
background: url(dashboard.jpg) -1930px -1px;
}
</style>
</head>
<body>
<img class="home" src="img_trans.gif"><br><br>
</body>
</html>
Dont have Enough reputation to comment thats why i am putting it in here.
try adding the both styles in a main container then apply the approach of width percentage
<style>
imgMainContainer{width:100%;}
</style>
then put both the right and left images in the main container with widths 100% for each. following is the old answer so consider above only
Try using the percentage instead of pixels in background height and width.
<html>
<head>
<style>
img.home {
width: 100%;
height: 100%;
background: url(dashboard.jpg) -1930px -1px;
}
</style>
</head>
<body>
<img class="home" src="img_trans.gif"><br><br>
</body>
</html>
CSS
.leftImg{
background:url('http://upload.wikimedia.org/wikipedia/commons/2/26/Kluft-hoto-Black-Rock-Desert-Aug-2005-Img_5081.jpg');
background-size:200% 100%;
width:50%;
height:100vh;
}
.rightImg{
background:url('http://upload.wikimedia.org/wikipedia/commons/2/26/Kluft-photo-Black-Rock-Desert-Aug-2005-Img_5081.jpg');
background-size:200% 100%;
width:50%;
height:100vh;
background-position: right top
}
and HTML
<div class="leftImg"></div>
<div class="rightImg"></div>
Try this
Can anyone enlighten me to why the following occurs with this test case?
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #ffffff;
margin: 0;
padding: 0;
}
.section {
background-color: #000000;
color: #ffffff;
}
.wrap {
width: 960px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="section">
<div class="wrap">Some content here</div>
</div>
</body>
</html>
When the window is big enough to accommodate 960px, everything works as expected.
When the window is resized to smaller than 960px a horizontal scrollbar appears (As expected). However, when scrolling horizontally it appears that the .section div has not been stretched across the document and appears only to be the width of the window, therefore revealing the body's white background.
I would normally expect the black, .section div to stretch across the document since it's display: block by default.
Does anyone know why this is happening and more importantly, how to get the result I expect?
Cheers
It's because the witdth of your section is only as big as what's in it. In this case this means your wrapper which is set to 960px. Setting the section in percentage only works as percentage of the available screen, so width:100% wouldn't solve this. You should set your section width to a specific number and that would fix the issue.
Edit: Use min-width instead of width and it works even better for when you go bigger than you min-width.
section is sizing to it's contents, try setting width:100% on .section
In addition, you may want to add this to .wrap
margin-left:auto;
margin-right:auto;
that will center the wrap div
I have a main container div, and I'd like it to be margined from the top of the screen exactly, for example, 10% of the screen width. This way I won't have problems with non-uniform screen sizes etc..
I already found a dirty workaround which is putting a 1px by 1px image of the color of the background, right before the div, and then style it to have 10% of the width of the screen. But this looks quite dirty, doesn't it? Is there any better solution?
Same solution as Rubens without using tables. I've also placed some code to deal with the top margin you were asking about but using padding instead.
<html>
<head>
<title>...</title></head>
<body>
<div id="content">
Your whole page comes here...
</div>
</body>
</html>
* {
padding:0;
margin:0;
}
html, body {
height:100%;
}
body {
padding:10% 0 0;
}
#content {
width: 850px; // replace with your desired width
margin:0 auto;
}
The solution I find very elegant is to insert the page in a table, beginning right after the body, and terminating right before it.
You'd have this:
<html>
<head><title>...</title></head>
<body>
<table id="content"><tr><td>
Your whole page comes here...
</td></tr></table>
</body>
</html>
Now simply decide the size of the page, using the style:
#content {
width: 850px;
margin-left: auto;
margin-right: auto;
}