I have block for images carousel, for example. I know nothing about picture sizes. I want to vertically and horizontally align images to center. One special thing is that i need wrapper above image, so i can set little plates with username. So i use max-width:100% and max-height:100% for center and middle aligning like this
How to vertically align an image inside div
So i have this code
.container{
position: relative;
width: 100px;
height: 100px;
border: 1px solid;}
.frame-wrapper{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: center;}
.frame {
/* equals max image height */
position:relative;
display: inline-block;
border: 1px solid red;
white-space: nowrap;
max-width: 100%;
max-height: 100%;
height: 100%;
box-sizing: border-box;
vertical-align: middle;}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;}
img {
vertical-align: bottom;
max-width: 100%;
max-height: 100%;}
<div class="container">
<div class="frame-wrapper">
<span class="helper"></span>
<div class="frame">
<span class="helper"></span><img src="https://dummyimage.com/50x200/000/fff" />
</div>
</div>
</div>
Problem appears when the image have height is bigger than container. When it happens picture oversize the wrapper and for fixing it I set height:100% to wrapper and picture fits inside it. What I am asking about here is that in FF browser when I set height: 100% to wrapper image is scales, but wrapper doesn't follow it and still have original width.
So you can open this in any browser instead Firefox and look how it must work
JS Fiddle if you want
http://jsfiddle.net/crazyboris/pd3v2kp8/1/
Do you have any ideas why is this happening?
It's because your .frame-wrapper doesn't have height and width specified being an absolute positioned container. Add:
height: 100%;
width: 100%;
Related
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
How to vertically align an image inside a div
(37 answers)
Closed 10 months ago.
If I want to fit a large image(with arbitrary aspect ratio) into a small div, according to this answer, I just need to set the maximum width and height to 100%,
img {
max-width: 100%;
max-height: 100%;
}
And if I need to further center the image, according to this answer, we can set the margin to auto,
img {
display: block;
margin: 0 auto;
}
But in this way, the image is only centered in horizontal. To have it vertically centered, I've tried following approaches but don't work.
img {
margin: auto auto;
}
img {
vertical-align: middle;
}
Any one can help?
you can use display flex:
.div {
border: 1px solid;
display: flex;
justify-content: center;
align-items: center;
}
img {
max-width: 100%;
max-height: 100%;
}
.portrait {
height: 80px;
width: 30px;
}
.landscape {
height: 30px;
width: 80px;
}
.square {
height: 75px;
width: 75px;
}
Portrait Div
<div class="portrait div">
<img src="http://i.stack.imgur.com/xkF9Q.jpg" />
</div>
Landscape Div
<div class="landscape div">
<img src="http://i.stack.imgur.com/xkF9Q.jpg" />
</div>
Square Div
<div class="square div">
<img src="http://i.stack.imgur.com/xkF9Q.jpg" />
</div>
Here is a small trick to use...
First, make sure the parent div is set to position:relative;
Then in the img add this values
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
-webkit-transform:translate(-50%, -50%) !important;
This will automatically align the img in the middle of the parent div. You can delete all other values and use it like this
img {
max-width:100%;
max-height:100%;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
-webkit-transform:translate(-50%, -50%) !important;
}
Based on if the inline height and width of the parent div has an aspect ratio larger or smaller than the image, the image will center either horizontally or vertically. There is a little cheat with JavaScript, but looking at the CSS, this seems to be close to what you were initially attempting.
$(".imgContainer").each(function() {
const height = $(this).height() > $(this).children("img").eq(0).height() ? parseFloat($(this).height() * 0.99) + "px": "100%";
$(this).css("line-height", height);
});
.imgContainer {
text-align: center;
border: 3px solid blue;
}
.imgContainer img {
vertical-align: middle;
max-width: 100%;
max-height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="imgContainer" style="width: 435px; height: 320px">
<img src="https://i.stack.imgur.com/3WpTo.jpg">
</div>
<div class="imgContainer" style="margin-top: 10px; width: 435px; height: 260px">
<img src="https://i.stack.imgur.com/3WpTo.jpg">
</div>
<div class="imgContainer" style="margin-top: 10px; width: 435px; height: 289px">
<img src="https://i.stack.imgur.com/3WpTo.jpg">
</div>
I can't manage to dynamically position an overlay over an existing resizable textarea element.
Textarea doesn't seem to allow child nodes inside of itself so I have to create it as independent element
<body>
<textarea name="description" rows="20" cols="60"></textarea>
<div class="overlay" style="width: 200px; height: 200px;">Something to show over the center of textarea</div>
</body>
I need to position the overlay element exactly to the middle, while adjusting it's position if the textarea size is adjusted.
Probably I could achieve this by adding size change handlers to the TA and recompute the overlay position each time, but this seems yet too cumbersome to me. Are there any other working, more straightforward methods?
You can pull this off with zero javascript by putting the textarea inside a parent element. In this example, I use a div. Make the parent div resizable and stretch the textarea to fill the entire parent div. Then just using relative positioning, you can position another element on top of the textarea directly in the center of the parent div.
.parent
{
resize: both;
width: 300px;
height: 300px;
overflow: hidden;
position: relative;
}
textarea
{
resize: none;
width: 100%;
height: 100%;
background: #eee;
}
.parent .overlay
{
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
margin-top: -50px;
margin-left: -50px;
background: rgba(255, 0, 0, 0.25);
color: white;
font-size: 20px;
box-sizing: border-box;
padding: 35px 0;
text-align: center;
}
<div class="parent">
<textarea></textarea>
<div class="overlay">Overlay</div>
</div>
trying to create a new layout but have run into an issue.
Currently, i have a fixed sidebar to the left and then the content floated right.
The side bar has a width of 18%, and then the other content 82% width.
This works fine, but it looks ugly and is unstable at larger screen sizes.
I wish to however to make a change, and make the sidebar a fixed width. This poses a problem then on the other content which i want to take up the rest of the room.
How can i have the content to the right, to still take up the rest of the room whilst keeping a fixed sidebar?
Hope this makes some sort of sense!
Here is a js fiddle of the problem i face:
http://jsfiddle.net/Uyv6w/
And what i current do:
http://jsfiddle.net/Uyv6w/1/
Layout is like so:
<div id="container">
<div id="sidebar"></div>
<div id="content">
<div id="inner"></div>
</div
</div>
I guess I'm not exactly sure what you're looking for - but I tried with this FIDDLE.
I floated the major divs left, then just gave a min-width and max-width to the container.
Could you provide some more details?
CSS
html, body {
width: 100%;
height: 100%;
background-color: #333;
}
#container {
height: 100%;
min-width: 600px;
max-width: 1200px;
}
#sidebar {
float: left;
height: 100%;
width: 100px;
background-color: #9b59b6;
}
#content {
float: left;
width: 82%;
background-color: red;
overflow: hidden;}
#inner {
width: 80%;
margin-right: auto;
margin-left: auto;
background-color: gray;
height: 1000px;
padding: 10px;
}
img {
display: block;
width: 300px;
margin: 20px auto;
}
I'm looking for an easy solution to implement the below. Thumbnails will not be cropped but the container they are in will always be the same height/width.
The idea is that images larger than the container would be responsive (ie. scale down), while images that are smaller than the container will be shown "as is."
The problem I'm having is three-fold:
How to handle the responsive element, since we need to account for various aspect ratios (ie. horizontal vs vertical vs square)
How to vertical align when necessary
Images that aren't larger than their container natively shouldn't scale up
Obviously, it would be great if this could be done with CSS only, but I understand javascript might be needed. If that's the case, I'm looking for a lightweight solution since the grid of thumbnails could get quite lengthy.
Any thoughts?
A pure CSS solution:
demo
.container {
display: inline-block;
position: relative;
width: 8em; height: 10em;
}
.container img {
position: absolute;
top: 50%; left: 50%;
width: auto; height: auto;
max-width: 100%; max-height: 100%;
transform: translate(-50%, -50%);
}
The images keep their natural size (width: auto; height: auto;) unless they are bigger than the container (max-width: 100%; max-height: 100%;), in which case they are going to take the size of the container that they exceed and scale the other one accordingly.
Positioning the images in the middle of the container: give them position: absolute and put their top left corner in the middle of the container (top: 50%; left: 50%;). Then translate them left and up by half their computed dimensions, whatever those would be (transform: translate(-50%, -50%);).
This solution works in browsers supporting 2D transforms. Sadly, this excludes IE8 and older and Opera Mini.
A better compatibility solution (that I cannot actually test right now in IE8, so I'm just assuming it should work there too) would be:
demo
.container {
display: inline-block;
width: 8em; height: 10em;
text-align: center;
white-space: nowrap;
}
.container img {
display: inline-block;
width: auto; height: auto;
max-width: 100%; max-height: 100%;
vertical-align: middle;
}
.container:after {
display: inline-block;
height: 100%; width: 0;
vertical-align: middle;
content: "";
}
First of all, give images display: inline-block;.
Set text-align: center; on container so that images that are less wide than the container get centred horizontally.
Now to make sure they are in the middle vertically as well. Give them vertical-align: middle;, but that's not enough. inline-block elements are vertically aligned with respect to their inline-block siblings and we have no siblings in this case. So we also need another middle vertically-aligned inline-block element that has the same height as the container. Or a pseudo-element on the container, it's the same thing.
This pseudo-element is going to have height: 100%; so that its vertical middle coincides to that of its parent and width: 0; so that it doesn't affect the horizontal alignment of the image (when the image's natural width < the container's width). It's also going to have display: inline-block; and vertical-align: middle; just like the image.
We also need white-space: nowrap; on the container to prevent the pseudo-element from moving below (and not affect the vertical alignment of the image this way) when the image occupies the entire width of the container.
This is actually the first question I asked on Stackoverflow! Now I know Ana has already come up with a working solution, I thought I'd also post mine that works IE8 onward:
http://jsfiddle.net/crtpq2jg/
Basic Markup:
<div class='container'>
<img src='http://www.lorempixel.com/100/200' />
</div>
CSS:
.container {
float: left;
width: 180px;
height: 210px;
text-align: center; /* to center align horizontally */
line-height: 210px; /* Equal to container height */
font-size: 0; /* This is to eliminate a weird ~2px vertical offset on the images. But you can just specify the font-size for any children elements that may contain text. */
}
.container > img {
width: auto; height: auto;
max-width: 100%; max-height: 100%;
vertical-align: middle;
}
This will work in IE 8 (demo)
Html from ana's answer
The trick is to use the after pseudo element to extend the containers line-height to its own height.
This way you can use regular text-align and vertical-align along with max-width and max-height.
.container {
display: inline-block;
position: relative;
border: solid .25em deeppink;
width: 8em;
height: 10em;
text-align: center;
vertical-align: middle;
white-space: nowrap;
}
.container img {
display: inline-block;
vertical-align: middle;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
.container:after {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
width: 0px;
}
Have a look at this jsfiddle: http://jsfiddle.net/jQN4L/
The max-width and max-height cause the image to scale down if needed, but not scale up. Horizontal centering is done with text-align. Vertical centering is done with line-height and vertical-align, although this method does require that the container has a known height.
HTML:
<div id="d1">
<img src="http://i.imgur.com/VAZNIev.jpg" />
</div>
<div id="d2">
<img src="http://i.imgur.com/VAZNIev.jpg" />
</div>
CSS:
img {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
div {
text-align: center;
font-size: 0;
}
#d1 {
width: 200px;
height: 100px;
line-height: 100px;
background: red;
}
#d2 {
width: 100px;
height: 200px;
line-height: 200px;
background: green;
}
Changing my answer- should have read the question better!
html:
<div class="img_wrapper">
<img class ='full_width' src="1.png" />
<img class ='full_width' src="2.png" />
<img class ='full_width' src="3.png" />
</div>
css:
.img_wrapper {
width: 860px;
margin: 30px;
}
.full_width {
width: 200px;
height: 200px;
float: left;
margin: 10px;
vertical-align: middle;
}
.full_width img {
max-width: 100%;
max-height: 100%;
}
I've problem with centering dynamic image to fixed size div. So, the main idea is that image knows how to scale itself whether it is panoramic image or portrait image. The div, I'm aligning to, is close to 16:9 (300x170). Any ideas?
try this - DEMO
div {
height: 170px;
width: 300px;
border: solid;
line-height: 170px;
text-align: center;
}
div img {
display: inline-block;
max-width: 300px;
max-height: 170px;
vertical-align: middle;
}