After searching both Stack Overflow and Google I still wonder how to vertical center a image that is bigger than it's parent element. I use no height, just max-height, because I want to make a responsive solution, without jQuery. If possible.
Here is some code:
<div style="max-height: 425px; overflow: hidden;">
<img src="http://img.youtube.com/vi/jofNR_WkoCE/maxresdefault.jpg">
</div>
to center vertically an bigger image u can use the construction and css bellow
<div class="img-wrapper">
<img src="http://img.youtube.com/vi/jofNR_WkoCE/maxresdefault.jpg">
</div>
And css:
.img-wrapper{
position: relative;
overflow:hidden;
height:425px;
}
.img-wrapper img{
position: absolute;
top:-100%; left:0; right: 0; bottom:-100%;
margin: auto;
}
FIDDLE
I found a way to make it work with only a max-height (as opposed to a fixed height) set on the container.
The bad news is that it requires an additional wrapper element.
HTML:
<div class="img-wrapper">
<div class="img-container">
<img src="http://img.youtube.com/vi/jofNR_WkoCE/maxresdefault.jpg">
</div>
</div>
CSS:
.img-wrapper {
overflow: hidden;
max-height: 425px;
}
.img-container {
max-height: inherit;
transform: translateY(50%);
}
.img-wrapper img {
display: block;
transform: translateY(-50%);
}
If you dont need to use img tags (fiddle):
CSS
.imageContainer {
margin: 0;
height: 200px; /* change it to your value*/
width: 200px; /* or use fixed width*/
background: transparent url('') no-repeat center;
overflow: hidden;
}
HTML
<div class="imageContainer" style="background-image: url('http://deepwish.com/site/wp-content/uploads/2013/10/butterfly2_large.jpg');"></div>
Nowdays you can achieve this by using flexbox:
<div class="container">
<img src="http://img.youtube.com/vi/jofNR_WkoCE/maxresdefault.jpg">
</div>
.container {
overflow: hidden;
max-height: 425px;
display: flex;
align-items: center;
justify-content: center;
}
.container img {
max-width: 100%;
}
View example on CodePen:
https://codepen.io/runonce86/pen/vYrpYvG
Try
<html>
<head>
</head>
<body >
<div style="max-height: 425px;border:1px solid;max-width:500px;overflow:hidden">
<img src="http://img.youtube.com/vi/jofNR_WkoCE/maxresdefault.jpg" style='position: relative;top: -231px;left: -500px;'>
</div>
</body>
</html>
if you want to make a responsive image, try using <div style=""> <img src="http://img.youtube.com/vi/jofNR_WkoCE/maxresdefault.jpg" width="100%" height="100%"></div>
Related
This is what I am trying to achieve:
An image positioned in between two separate div tag like facebook profile page:
I searched here but the solutions did not help much. It got positioned as I wanted but since it is bootstrap and it should responsive, when the screen size decreases the image position gets changed, which I do not want.
Here is the code(which might not be proper as I was just testing) -
HTML -
<div class="container">
<div class="jumbotron jumbo" id="custjumbo">
<h1>This is a jumbotron... </h1>
<h2>Let's see what can we make of it..</h2>
<br>
<img src="images/tiger.jpg" class="img-thumbnail" alt="Tiger"
width="304" height="236">
</div>
</div>
The CSS -
.container {
background-color: cadetblue;
}
.jumbo {
margin-top:20px;
position: relative;
}
.img-thumbnail {
position: absolute;
bottom: -60px;
right: 200px;
}
img {
display: block;
width: 200px;
height: 200px;
background: green;
}
This is what I got after:
You could try to change the img-thumbnail to position: relative and use 'bottom: -60px' instead of positioning absolute, that can reposition the image without the use of absolute positioning
check it
.container {
background-color: cadetblue;
width:100%;
}
.jumbo {
margin-top:20px;
position: relative;
}
.img-thumbnail {
position: absolute;
bottom: -90px;
left:15%;
}
img {
display: block;
width: 200px;
height: 200px;
background: green;
}
.bottom-div {
height:200px;
background-color:red;}
<head>
<meta name="viewport" content="width=device-width, initial-sclae=1">
</head>
<div class="container">
<div class="jumbotron jumbo" id="custjumbo">
<h1>This is a jumbotron... </h1>
<h2>Let's see what can we make of it..</h2>
<br>
<img src="images/tiger.jpg" class="img-thumbnail" alt="Tiger"
width="304" height="236">
</div>
<div class="bottom-div"></div>
</div>
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 am a rookie for front-end development. Recently, I wrote codes like:
<div style="background-color:red">
<img src='https://www.logaster.com/blog/wp-content/uploads/2013/06/jpg.png'>
</div>
The height of image(logo.jpg) is 80px, but the height of div is 82px. Why?
You can show image like a block to fix that,
<div>
<img style="display:block" src='logo.jpg'>
</div>
<div style="height:your height; width:your witdh;">
<img src='logo.jpg'>
</div>
To change the height or width you can do what i did above with inline style. or give the div a class or give the div an id and style it in an external stylesheet.
You need to write proper css to achieve this.
<div class="wrap">
<div class="box1">
<img src="http://www.placekitten.com/500/500">
</div>
</div>
.box1 {
width:auto;
height: auto;
max-width: 600px;
max-height: 300px;
background-color:chocolate;
padding:5px;
display: inline-block;
}
.box1 img {
vertical-align: top;
max-width: inherit;
max-height: inherit;
}
.wrap {
border: 1px dotted gray;
margin: 1.00em 0;
text-align: center;
}
JsFiddle : https://jsfiddle.net/nikdtu/75nu1a4m/
I'm trying to put two images side by side and make them responsive. The problem now is, that the second image wraps first and then reacts to the size of the browser.
I want them to stay on the same line (level) and change their size automatically and wrap at a certain point (this part isn't the problem)....
The html:
<div id="wrapper">
<div id="outer">
<div class="itemwrapper">
<img src="item2.jpg" alt="bag" />
</div>
<div class="itemwrapper">
<img src="item3.jpg" alt="pen" />
</div>
</div>
</div>
The css:
#wrapper {
max-width: 1050px;
margin: 60px auto 60px auto;
background-color: #DDD
}
.itemwrapper {
display: inline;
}
img {
max-width: 100%;
height: auto;
}
use display table to set it side by side and keep it side by side and responsive.
display: table; with table-layout: fixed; will create a fluid layout for child elements with display: table-cell;
this will not only keep them the same width but also keep the containers the same height.
vertical-align: top; will keep them aligned to the top alternatively you can change the vertical position to middle and bottom plus some others.
Any questions just fire away.
#wrapper {
max-width: 1050px;
margin: 60px auto 60px auto;
background-color: #DDD
}
#outer {
display: table;
width: 100%;
table-layout: fixed;
}
.itemwrapper {
display: table-cell;
vertical-align: top;
width: 100%;
}
img {
max-width: 100%;
height: auto;
}
<div id="wrapper">
<div id="outer">
<div class="itemwrapper">
<img src="item2.jpg" alt="bag" />
</div>
<div class="itemwrapper">
<img src="item3.jpg" alt="pen" />
</div>
</div>
</div>
if image are same size or same ratio, you may use flex , width and min-width to set a break point:
#outer {
width:70%;/* demo*/
margin:auto;/* demo*/
display:flex;
flex-wrap:wrap;
}
#outer>div {flex:1;}
#outer>div>img {
width:100%;
min-width:200px;/* demo*/
}
<div id="wrapper">
<div id="outer">
<div class="itemwrapper">
<img src="http://lorempixel.com/200/100" alt="bag" />
</div>
<div class="itemwrapper">
<img src="http://lorempixel.com/400/200" alt="pen" />
</div>
</div>
</div>
remove or reset to your needs the rules commented with demo.
Thanks for the help, but I'm doing it with a different solution now, whicha friend suggested:
#outer {
position: relative;
width: 50%;
height: 0;
margin: 30px auto 0 auto;
padding-top: 25%;
background-color: #999;
}
.itemwrapper {
position: absolute;
width: 50%;
height: 100%;
top: 0;
}
.item2 {
left: 50%;
}
#outer img {
height: 100%;
max-width: 100%;
}
<div id="wrapper">
<div id="outer">
<div class="itemwrapper">
<img src="http://lorempixel.com/200/100" alt="bag" />
</div>
<div class="itemwrapper item2">
<img src="http://lorempixel.com/400/200" alt="pen" />
</div>
</div>
</div>
This evokes another problem though. The images arent filling the itemwrappers. I think i need to write some js for this :S.
Need to solve this little task:
Center vertically and horizontally IMAGE in DIV.
DIV height must be proportional to width.
DIV width is stretchable (for example 50% of parent div).
IMAGE width and height = auto (it must fill div if its width or height > than div width or height, and have primary size if its < div size, and stay proportional).
I know how to make 2 and 3.
HTML:
<div class="container">
<img src="img.png"/>
</div>
CSS:
.container {
width: 100%;
height: 0;
padding-bottom: 100%;
}
But how to center and middle IMAGE in this DIV?
There is a lot of ways to make 1 task with non proportional and non strechable div.
But I dont know how to make it all in full house of tasks.
Can you help? HTML and CSS may be any.
Did you try :
.container img {
vertical-align : middle
}
? It will verticaly align your image.
Try this:
<style>
.container
{
width :100%;
height :100%;
display :table;
}
.child
{
vertical-align :middle;
display :table-cell;
}
.child img
{
display :block;
width :50%;
margin :0 auto;
}
</style>
<div class="container">
<div class="child">
<img src="img.png"/>
</div>
</div>
Solved it by myself. Check here: http://jsfiddle.net/42trk8ux/17/
HTML:
<div class="width-50">
<div class="parent">
<div class="aspect"></div>
<div class="block">
<div class="tbl">
<div class="tbl-cell">
<img src="img.jpg"/>
</div>
</div>
</div>
</div>
</div>
CSS:
.width-50{
width:50%
}
.parent{
position: relative;
}
.aspect
{
width: 100%;
height: 0;
padding-bottom: 100%;
box-sizing: border-box;
}
.block{
width: 100%;
height: 100%;
position: absolute;
top: 0;
display: block;
}
.tbl{
display: table;
width: 100%;
height: 100%;
position: absolute;
}
.tbl-cell{
display: table-cell;
vertical-align: middle;
text-align: center;
background: #aaa;
}
.tbl-cell img{
max-width:100%;
max-height:100%;
}