I have a div as the main wrapper, then an image-wrapper div as the image wrapper, and an .
What I want is that under certain lower resolutions (1300px for example), the image-wrapper div to stay vertically aligned. Now, when you see it, it is not vertically aligned. The top padding keeps the image-wrapper div stuck to the top, while on the bottom there is a large gap.
Here is the site:
http://namdarshirazian.com
It happens in the homepage. The central image.
Here is the ID of the main div:
#homepage-image
Here is the CSS of the three
#homepage-image
{
padding: 20px 20%;
border: 2px #CCC solid;
background-color: white;
text-align: center;
overflow: hidden;
height: 540px;
}
#homepage-image div
{
height: 495px !important;
padding: 0px !important;
}
#homepage-image div img
{
width: 100%
}
And here is the markup of the element:
<div class="image" id="homepage-image">
<div style="height: 520px; overflow: hidden;">
<img src="photo/homepage/image.jpg" alt="" title="">
</div>
</div>
The CSS are located in the style.css line 187.
I appreciate if you do a live edit. Thanks in advance
<div class="image" id="homepage-image">
<div style="height: 520px; overflow: hidden; white-space: nowrap;">
<span class="keepImgVerCenter"></span>
<img src="photo/homepage/image.jpg" alt="" title="">
</div>
</div>
.keepImgVerCenter{
display: inline-block;
height: 100%;
vertical-align: middle;
}
Hope this helps.
Related
I'm relatively new to coding and need your help.
Here's the codepen:
http://codepen.io/anon/pen/NdMjZy
<div class="flex-item w50 fill">
<div class="flex-inner portfolio">
<a href="">
<img src="" alt="">
</a>
</div>
</div>
What I need: Images should fill/cover the flex-item container. They should be centered and stay in aspect-ratio.
You can see that the images with the chairs are not 100% height.
I tried to use imagefill.js but that resulted in 0px height flex-items.
Thank you in advance!
You can set object-fit: cover for your img. Your a element must be a flexbox to make object-fit work.
Note that: I just add resize: both; to .flex-inner for demo only. You can resize the .flex-inner to see effect
.flex-inner {
width: 200px;
height: 200px;
resize: both;
overflow: auto;
}
.flex-inner a {
display: flex;
width: 100%;
height: 100%;
border: solid 1px #123;
}
img {
object-fit: cover;
width: 100%;
}
<div class="flex-inner">
<a href="">
<img src="http://via.placeholder.com/500x200" alt="">
</a>
</div>
All the methods mentioned here and everywhere else didn't work efficiently . I have 52 Flex boxes , aligned 13 x 4 , and inside each box , there is an image with 6 x 6 cm dimensions .
What worked for me is targeting the <a> element :
.container nav ul li a {
display: block;
border: 10px solid yellow;
border-radius: .5em;
padding: 0 0;
margin: .2em;
}
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 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;
}
Hi I have been trying to create a simple image gallery, but am having issues getting the overflow-x scroll bar to appear when my images cumulative width reach a value greater than their parent div.
Check out this fiddle demonstrating the problem.
I just want to be able to resize the window and have the overflow-x scroll bar to appear when there are to many thumbnails to display horizontally within the available width of their parent.
The cleanest, and easiest way to achieve this is to add white-space: nowrap; to your container div and the images within it:
CSS
.container {
height: 140px;
width: 100%;
border: solid 1px red;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
}
img {
white-space: nowrap;
}
HTML
<div class="container">
<img src="http://images.gs-cdn.net/static/artists/120_artist.png"/>
<img src="http://images.gs-cdn.net/static/artists/120_artist.png"/>
<img src="http://images.gs-cdn.net/static/artists/120_artist.png"/>
<img src="http://images.gs-cdn.net/static/artists/120_artist.png"/>
<img src="http://images.gs-cdn.net/static/artists/120_artist.png"/>
<img src="http://images.gs-cdn.net/static/artists/120_artist.png"/>
<img src="http://images.gs-cdn.net/static/artists/120_artist.png"/>
<img src="http://images.gs-cdn.net/static/artists/120_artist.png"/>
<img src="http://images.gs-cdn.net/static/artists/120_artist.png"/>
</div>
Should dynamically adjust as required, enjoy!
Here is another pure CSS solution:
I placed the images in another div
<div style='height:100%; display: inline; white-space: nowrap;'>
check jsfiddle.
PS: I copied the images a few times just to show how it looks with more images. The inline css can be moved to a class or ID but that's up to you.
EDIT: Wrong link. Sorry, i replaced it :)
This fiddle should do the trick... There is a fixed width container for the thumbnail images which has a horizontal scrollbar when the contained images overflow to the right.
HTML
<div class="gallery-container">
<div class="gallery">
<div class="thumbnails">
<img src="http://www.drawingcoach.com/image-files/cartoon_trees_st5.jpg"/>
<img src="http://www.aperfectworld.org/clipart/nature/cartoon_tree.png"/>
<img src="http://84d1f3.medialib.glogster.com/media/23/23af5b409b4e973a9353048b062d73a33677c1f64c4b912a0aa6930081894f48/tree-cartoon-jpg.jpg"/>
<img src="http://www.drawingcoach.com/image-files/cartoon_trees_st5.jpg"/>
<img src="http://www.aperfectworld.org/clipart/nature/cartoon_tree.png"/>
<img src="http://84d1f3.medialib.glogster.com/media/23/23af5b409b4e973a9353048b062d73a33677c1f64c4b912a0aa6930081894f48/tree-cartoon-jpg.jpg"/>
</div>
</div>
<img class="fullpic" src="" />
</div>
CSS
.gallery
{
border: 1px solid black;
height: 120px;
width: 200px;
overflow: hidden;
overflow-x: scroll;
}
.thumbnails
{
/* Arbitrarily large number */
width: 10000px;
}
.gallery-container img /* larger size image */
{
width: 200px;
height: auto;
}
.thumbnails img
{
width: auto;
height: 100px;
display: block;
float: left;
border: 1px solid #ddd;
margin: 1px;
}
(Optional) JQuery
$('.thumbnails img').click(function() {
$(this).parent().parent().find('.selected').attr('src', $(this).attr('src'));
});
I was not successful CSS. Should be in the center of the picture (different size) in the div. See an example:
And examples of html and css - http://jsfiddle.net/KJXUt/
HTML:
<div class="box">
<a href="#" class="pic">
<img src="http://pics.posternazakaz.ru/pnz/product/small_x2/97/61/ccc0980cde08f9032cd665f7104aca10.jpg" alt="" width="300" height="130" />
</a>
</div>
<div class="box">
<a href="#" class="pic">
<img src="http://www.22.ru/ow_userfiles/plugins/photo/photo_preview_137.jpg" alt="" width="140" height="140" />
</a>
</div>
CSS:
body {
background: #D6E8FF;
}
.box {
border: #555 1px solid;
margin-right: 10px;
width: 100px;
height: 100px;
overflow: hidden;
display: table-cell; /* <-- problem */
vertical-align: middle; /* <-- problem */
}
img {
max-width: 100px;
height: auto;
}
How to correct style? Help, please. Thanks in advance
The term to make a picture smaller without re-sizing it is called "cropping", to directly achieve your answer, a different css property: background will be used. And the div's will be removed. #Heliio's method is great if you need <div> tags.
A code sample is as following
HTML:
<a href="#" class="pic pic1">
</a>
CSS:
.pic {
display:inline-block;
border: #555 1px solid;
margin-right: 10px;
width: 100px;
height: 100px;
}
.pic1{
background: transparent url(http://mw2.google.com/mw-panoramio/photos/medium/62256112.jpg) -20px -200px no-repeat;
}
Note that the css has some negative values, these are extremely tedious to modify, but it's really just -((imagewidth-100)/2) x -((imageheight-100)/2)
http://jsfiddle.net/KJXUt/9/
When you use display: table-cell; it's forcing to fixed size to the cells. Maybe it's not a good solution.
I dont understand, if want really it, but:
body {
background: #D6E8FF;
}
.box {
border: #555 1px solid;
float:left;
width: 100px;
height: 100px;
overflow: hidden;
}
img {
max-width: 100px;
}
Example here: http://jsfiddle.net/KJXUt/1/
Or, if prefer: http://jsfiddle.net/KJXUt/3/
This is a simple technique to center the image vertically in .box
http://codepen.io/AntonNiklasson/pen/pkaov
To add more boxes next to eachother, add float: left to .box