body {
width: 100%;
max-width: 1200px;
margin-right: 2px;
margin-left: 2px;
}
.fruit {
width: 1200px;
max-height: 39em;
}
img {
float: left;
}
<div class="fruit">
<img src="images/OrangesPinkBackground.jpg" alt=" " width="600px" />
<img src="images/GrapefruitPinkBackground.jpg" alt=" " width="600px" />
</div>
I've tried so many different things I can think of and they just keep ending up like this
Maybe it's a problem with how I have the body styled? because there is a lot more whitespace on the right side where the scroll bar is. What I was trying to was evenly split the two images so they would each take up half the screen and only extend about 40em downwards as well. Somehow I just can't get them to lineup right.
I'll take any suggestions at this point.
<div class="fruit">
<div class="fruit-img">
<img src="images/OrangesPinkBackground.jpg" alt=" "/>
</div>
<div class="fruit-img">
<img src="images/GrapefruitPinkBackground.jpg" alt=" "/>
</div>
</div>
In your parent fruit class:
.fruit{
display: flex;
align-items:center;
height: 39em;
width: 100%;
}
In your child fruit class for each image, this acts as a container
.fruit-img{
height: 100%;
flex-basis: 50%;
}
This is your actual image class
.fruit-img img{
width: 100%;
height: 100%:
}
You can use flexbox. It's more easy than using float.
Use flex with:
justify-content: space-between
to get images align at the end of screen on each side
Related
In <body> <section> I have background image:
<img src="img/background.png" class="back-img">
css:
.back-img {
width: 100%;
height: auto;
overflow:hidden;
}
like this:
<section>
<div id="topLine">
<img src="img/background.png" class="back-img">
</div>
</section>
I'm trying to align different separate square images of same size horizontally in the center over background image in browser window with position: fixed; to keep it in the center of screen with scrolling and organize vertically on mobile screen:
<img src="img/square1.png" class="image">
<img src="img/square2.png" class="image">
<img src="img/square3.png" class="image">
.css:
.image {
position: fixed;
width: 69px;
height: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
to archive something like this:
Background color implies background picture and white squares is a same size images.
I've tried this example:
<div class="row">
<div class="column">
<img src="img/square1.png">
</div>
<div class="column">
<img src="img/square1.png">
</div>
<div class="column">
<img src="img/square1.png">
</div>
</div>
with:
* {
box-sizing: border-box;
}
.column {
float: left;
width: 33.33%;
padding: 5px;
}
.row::after {
content: "";
clear: both;
display: table;
}
which not organizes images as required in my case and should align pictures in one line, but with position: fixed; I have only one image on screen.
I'm trying to find some correct way to get result, maybe with using of <table>, <tr>, <td> to organize different images according screen size from horizontal to vertical group line automatically with browser window manual narrowing.
First of all, I have to repeat same image in horizontal line in center over background image in fixed position:
Any guide or example would be helpful
CSS grid or flex would be ideal for this (assuming modern-ish browsers).
It's not clear to me why you require an img element for your background image, but I've had plenty of reasons in the past so this would need a little extra to use an img element .
Here is the most basic example of my interpretation of what you're looking for: https://codepen.io/Ilkai/pen/abNdZQK
Basically:
Set up your section with a background-image, and also use it as your source of the container size (full screen with 100 vw/vh)
<section class="bg">
...
</section>
.bg {
background-image: url('...');
background-size: cover;
width: 100vw;
height: 100vh;
}
Create a div that will be dedicated to being your layout parent, with using display: flex/grid (Flexbox is slightly older than Grid, so it has a bit better support). Center children with align-items and justify-content.
<section class="bg">
<div class="layout">
...
</div>
</section>
.bg { ... }
.layout {
width: inherit;
height: inherit;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
You'll also apply your media query to the layout div.
.bg {...}
.layout {...}
#media (min-width: 720px) {
.layout {
flex-direction: row;
}
}
Add your img elements as children of the layout div, size accordingly.
<section class="bg">
<div class="layout">
<img src="..." />
<img src="..." />
<img src="..." />
<img src="..." />
</div>
</section>
.bg {...}
.layout {...}
#media (...) {}
.layout img {
width: 6rem;
height: 6rem;
object-fit: cover;
margin: 1rem;
}
If I have misunderstood what you're after let me know in the comments
With position: fixed the images are likely overlapping.
Try wrapping them in a fixed element, and letting them be children in that element, you could then either use display: inline block; text-align: center; or display: flex; justify-content: center; to achieve your goal.
I recommend using flex as you can very easily change this for your mobile CSS.
Image example of what I need
I basically copied the code off of a YouTube video. I am a rookie so try and explain as easily as possible how to stack two images on top of each other.
They are the same width and same height images and need to be aligned horizontally and vertically.
.image {
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -260px;
}
<div class="image">
<img src="car.png">
</div>
There are a few ways to do this. The most simple would probably be to edit your CSS to do the following:
CSS:
.image {
width: 100%; /* Image container is now full-width */
}
.image img {
margin: 40px auto; /* "auto" will center block elements */
display: block; /* Set images to be "block" so they obey our auto margin */
}
HTML:
<div class="image">
<img src="path/to/image1.jpg">
<img src="path/to/image2.jpg">
</div>
JSFiddle
For horizontal and vertical centering:
While some may prefer the flex method, I prefer the table-cell method for simple alignment. Try this:
CSS:
.image {
width: 100%;
height: 500px /* Modify this to fit your needs */
display: table;
}
.image .centered {
display: table-cell;
vertical-align: middle;
}
.image .centered img {
margin: 40px auto;
display: block;
}
HTML:
<div class="image">
<div class="centered">
<img src="http://fillmurray.com/360/100">
<img src="http://fillmurray.com/360/100">
</div>
</div>
JSFiddle
If the question is only to put second image under the first just br tag
If the question is to make on blank page 2 images in center one under one:
<table style="width: 100%; height: 100%; border-spacing: 0px; border-collapse: collapse; padding: 0px; margin: 0; border: 0;">
<tr style="height: 100%">
<td style="text-align: center; vertical-align: middle; height: 100%;">
<img src="1.jpg" /><br><br>
<img src="2.jpg" />
</td>
</tr>
</table>
For body and html you need also height: 100%
I'm pretty sure all positioning is possible with div so probably I'm complicated with tables but I was too tired to find the code for vertical positioning so I used tables in my work.
I'm aiming for a page with a collage of 4 photos;
a large one on the left taking up 50% width of the page and 100% of the height.
3 smaller photos, each taking up 50% of the width of the page but 33% of the height.
I'm running into problems with the larger image though,
my current CSS is;
.container {
width: 50%;
height: 100%;
overflow: hidden;
-size: cover;
}
and my html;
<div class="container">
<img height="100%" width="100%" src="jpg"></img>
</div>
the image's 50% width is fine but the height is only 50%.
It's a large image(4k) and my aim was to have overflow:hidden so that it fills the container but it's not working.
How could I do this?
Edit:
I'm aiming for it to be similar to this website:
http://www.masitupungato.com/
Suggested Solution
In fact, it is the easiest solution
Use two different divs, one for the left side and the other for the right side.
The left side div takes the half of the container width, and contains a image
The right side div takes the half of the container width, and contains 3 different divs, each one takes 33% of this right div height, and contains an image.
Use the CSS below:
.container {
width: 250px;
height: 250px;
margin: auto;
}
#left {
width: 50%;
float: left;
height: 100%;
}
#right {
width: 50%;
float: left;
height: 100%;
}
.right-inner{
width: 100%;
height: 33%;
}
.left-inner {
width: 100%;
height: 100%;
}
Expected output
Check it out.
You might change the height of the biggest image to fit the window of the device. Try to to set its height to "100vh", maybe it is what you were looking for.
you can use display:flex; property for this purpose. it will resolve your issue dynamically.
<div class="wrapper">
<div class="big-image">
<img src="http://static.independent.co.uk/s3fs-public/styles/story_medium/public/thumbnails/image/2013/07/31/10/A-striped-field-mouse-(Apod.jpg" alt="">
</div>
<div class="small-image-wrapper">
<div class="image">
<img src="http://static.independent.co.uk/s3fs-public/styles/story_medium/public/thumbnails/image/2013/07/31/10/A-striped-field-mouse-(Apod.jpg" alt="">
</div>
<div class="image">
<img src="http://static.independent.co.uk/s3fs-public/styles/story_medium/public/thumbnails/image/2013/07/31/10/A-striped-field-mouse-(Apod.jpg" alt="">
</div>
<div class="image">
<img src="http://static.independent.co.uk/s3fs-public/styles/story_medium/public/thumbnails/image/2013/07/31/10/A-striped-field-mouse-(Apod.jpg" alt="">
</div>
here is the fiddle https://jsfiddle.net/d95hw8fq/
I want to arrange the two images in my HTML page side by side.
I want the images to stay side by side even if the page size changes.
I also want the second image to span the entire header of the page ie. all the space left after the first image. The images here are of different size.
For now, I have arranged two images side by side, but when I change the size of the page, the image wraps and comes in the next line after the first image.
Here is my code sample and the CSS:
.header {
display: inline-block;
margin-left: auto;
margin-right: auto;
height: 120px;
}
<img class="header" src="http://www.placehold.it/160X120" style="float: left;" alt="CCM Logo">
<img class="header" src="http://www.placehold.it/543X120/0000FF" alt="CCM Banner">
Here is a Fiddle.
Use white-space: nowrap to prevent wrapping.
.header {
margin: 0 auto; max-width: 800px; /*centering header*/
height: 120px; position: relative; /*scale header images to 120px*/
white-space: nowrap; /*keep one-line*/
overflow: hidden; /*hide excess images parts on small screens*/
}
.header>img { height: 100%;}
<body>
<div class="header">
<img src="http://www.www8-hp.com/in/en/images/T-GE-healthcare-logo__153x115--C-tcm188-1616301--CT-tcm188-1237012-32.jpg" alt="CCM Logo">
<img src="http://blu-alliance.com/wp-content/uploads/2013/10/healthcare-banner2.jpg" alt="CCM Banner">
</div>
</body>
.header {
display: inline-block;
margin-left: auto;
margin-right: auto;
max-width: 50%;
height:120px;
}
HTML:
<body>
<img class="header" src="http://www.www8-hp.com/in/en/images/T-GE-healthcare-logo__153x115--C-tcm188-1616301--CT-tcm188-1237012-32.jpg" style="float: left;" alt="CCM Logo">
<img class="header" src="http://blu-alliance.com/wp-content/uploads/2013/10/healthcare-banner2.jpg" alt="CCM Banner">
</body>
Give style
.header {
display: block;
float:left;
height: 120px;
}
to both images
Apply below style:
.header {
display: inline-block;
height: 120px;
width: 50%;
}
Try with max-width Demo
.header {
max-width:50%;
}
Try this -
<div class="imgclass">
<div class="img1">
your img here
</div>
</div>
<div class="imgclass">
<div class="img2">
your img here
</div>
</div>
On your css file or between <style>here</style> this -
.imgclass {
display: table-cell;
}
I've been trying to get this image centered in the page for a while, and for some reason margin-left: auto; margin-right: auto; weren't doing anything. So in the spirit of wildly trying everything in sight, I stumbled on the following surprisingly correct result. My question is, why on earth does setting the width to 25% work? I would have expected 100%, or 50% at least.
This fiddle shows some other widths, which apparently behave in a nonlinear fashion: http://jsfiddle.net/mo85kkvv/
(Bonus question: is there a super-obvious way to use the margin-left/right properties instead that I'm missing?)
HTML:
<body>
<div id="bcontainer">
<img src="banner.png" alt="banner" />
</div>
</body>
CSS:
body {
margin: 0;
}
#bcontainer {
width: 25%; /* why 25%?? */
height: 50px;
display: table-cell;
text-align: center;
}
I don't know a lot about HTML but I think that the proper way to define the class container is:
.container {
height: auto;
display: block;
margin:auto;
}
This is more generic. You can use the element inspector, and see how the layers change.
Is what your after ? http://jsfiddle.net/mo85kkvv/4/
HTML
<body>
<div class="container" id="one">
<img src="http://www.clker.com/cliparts/6/J/D/n/z/V/gold-scroll-banner.svg" alt="banner" />
</div><br>
<div class="container" id="two">
<img src="http://www.clker.com/cliparts/6/J/D/n/z/V/gold-scroll-banner.svg" alt="banner" />
</div><br>
<div class="container" id="three">
<img src="http://www.clker.com/cliparts/6/J/D/n/z/V/gold-scroll-banner.svg" alt="banner" />
</div><br>
<div class="container" id="four">
<img src="http://www.clker.com/cliparts/6/J/D/n/z/V/gold-scroll-banner.svg" alt="banner" />
</div>
</body>
CSS
body {
}
.container img{
width:100%;
display: inline;
text-align: center;
margin: 0 auto;
}
#one {
width: 25%;
margin: 0 auto;
}
#two {
width: 50%;
margin: 0 auto;
}
#three {
width: 75%;
margin: 0 auto;
}
#four {
width: 100%;
margin: 0 auto;
}
It all depends what you want. Do you want the wrapper to be centered with the image floating in the center, or do you want the wrapper (in this case .container) to shrink around the image and be the one that floats in the center? I have updated your fiddle with simple examples of a few options.
http://jsfiddle.net/mo85kkvv/6/