Vertical adaptive image alignment on adaptive layout - javascript

This is my code :
HTML
<html>
<body>
<div id="id">
<div class="one">
<img>
</div>
<div class="two">
<img>
</div>
<div class="one">
<img>
</div>
</div>
</body>
</html>
CSS
div{
float : left;
width : 33,3%
height : 100%;
}
img{
max-width : 100%;
max-height : 100%;
}
div#id{
position : fixed;
top : 0;
bottom : 0;
left : 0;
right : 0;
}
I have been looking for this for ages and can't figure it out...
Unknown height of divs and images images can change.
How can I vertical align the images inside the divs class="one"?
as this is an adaptive layout, images must be scaled to prevent overflow.
table-cell or line-height = 100% doen't seem to work.
Do I realy need javascript here?
I have tried a jquery code but it is above my knowledge and ends up changing the margin of all the images in my website... here it is :
$(document).ready(function() {
$(".one").each(function(){
var wrapH = $(".one").outerHeight();
var imgH = $("img").outerHeight();
var padTop = (wrapH-(imgH))/2;
if (padTop>0){
$("img").css("margin-top", padTop + "px");
}
});
});

You can do this easily enough with the following HTML:
<div class="wrap">
<div class="image-panel">
<img src="http://placekitten.com/300/300">
</div>
<div class="image-panel">
<img src="http://placekitten.com/400/600">
</div>
<div class="image-panel">
<img src="http://placekitten.com/200/600">
</div>
</div>
and apply the following CSS styling:
.wrap {
border: 1px dotted blue;
display: table;
width: 100%;
}
.image-panel {
display: table-cell;
vertical-align: middle;
text-align: center;
border: 1px dashed blue;
width: 33.3333%;
padding: 10px;
}
.image-panel img {
width: 100%;
display: block;
}
In this particular layout, I assumed that each panel has 33.3% of the total width and that the images auto scale to fit the width of the table-cell div.
Demo Fiddle: http://jsfiddle.net/audetwebdesign/ZBNh7/

Ok I finaly found a solution using jquery thx to bdmoura in this post :
https://stackoverflow.com/users/2442497/bdmoura
He showed me how to set an adaptive margin to the images according to image and div height.
here is th jquery code :
$(document).ready(function() {
$(".one").each(function(){
var wrap = $(this),
wrapH = wrap.outerHeight(),
img = wrap.find('img'),
image = new Image(),
imgH = 0,
padTop = 0;
image.onload = function () {
imgH = img.outerHeight();
padTop = ( wrapH - ( imgH ) )/2;
if ( padTop > 0 ){
img.css("margin-top", padTop + "px");
}
}
image.src = img.attr('src');
});
});
thx to him!

Yes. I think at this point you'll need jQuery / javaScript.
You can only really align img's or inline / inline-block elements to one another.
.block img {
/* display: inline; (default) */
display: inline-block;
vertical-align: middle;
}
fiddle: HERE
It would be great if you figure it out! We all need this.
You could use table-cell as mentioned... but in a responsive setting, this isn't going to cut it - especially if these blocks are in a responsive grid. Once you need to float, which is pretty much always - things are going to get really messy. Mystery.

Related

How do I make a parent container the same size as its child without knowing that size ahead of time?

I have a display ad container <div class="sponsor">...ad here...</div>
If the injected ad is 200x300 i want to make .sponsor 200x300. Is that possible with css or do I need some javascript.
In addition to my comment, you should check fit-content, max-content and min-content for the width value.
By default, width and height value are auto
For width, it will take all the space available,
For height, it will define the height needed to display the content without overflow.
In your case, i suggest leaving the height value as auto unless you need another behaviour.
To quickly explain *-content:
min-content : It will take the minimum space available for its element to be displayed. For example, with text, it will be set to the width of the wider word, and display the minimum word possible per line, in order to get the smallest width possible
max-content : It will take the minimum space available without having to wrap the content, for example, it will be set to the full line of text without new line. It will breakline if the height is higher than the parent.
fit-content : Mix of both, it will be max-content unless the space available is too small, then will switch to min-content
Depending on the child element, you can use different value, but i would suggest leaving height:auto;and set width:min-content; to begin with.
Like the others wrote, you can try this with CSS. If that doesn't help you, here is a JavaScript solution:
const ad = document.querySelector('#ad'); /* get the ad */
const container = ad.parentElement; /* get the div.sponsor */
/* get widht and height of the ad */
const ad_widht = ad.offsetWidth;
const ad_height = ad.offsetHeight;
/* set widht and height of the div.sponsor */
container.style.width = ad_widht + 'px';
container.style.height = ad_height + 'px';
Working example: (with a button and an event listener to show the effect)
document.querySelector('#shrink').addEventListener('click', function() {
const ad = document.querySelector('#ad');
const container = ad.parentElement;
const ad_widht = ad.offsetWidth;
const ad_height = ad.offsetHeight;
container.style.width = ad_widht + 'px';
container.style.height = ad_height + 'px';
});
.sponsor {
width: 400px;
height: 300px;
background-color: red;
}
#ad {
width: 300px;
height: 200px;
background-color: yellow;
}
<div class="sponsor">
<div id="ad">
<p>this is the ad</p>
<button id="shrink">shrink</button>
</div>
</div>
I know that display: table is not the best solution in these days, but using display: table on .sponsor class should do the trick.
.outer {
background: green;
}
.sponsor {
background: blue;
display: table;
}
.sponsor img {
display: block;
}
<div class="outer">
<div class="sponsor">
<img src="https://via.placeholder.com/200x300" />
</div>
</div>
You could inspect element and see that the .sponsor class has the same width and height as the image (200 x 300). Also try to change the image and check if the .sponsor class does indeed have the same size as the image.
EDIT: Another option is to use display: flex on the parent of that div, but this will be really situational, this really depends on how you want the sibling of the .sponsor class behaves:
.outer {
background: green;
display: flex;
}
.sponsor {
background: blue;
}
.sponsor img {
display: block;
}
<div class="outer">
<div class="sponsor">
<img src="https://via.placeholder.com/200x300" />
</div>
</div>

Dynamically resize side-by-side images with different dimensions to the same height

I have two images side-by-side within a block-level container with arbitrarily different dimensions (as in, they could be any two images) that I want to dynamically adjust the width of so that the overall height of the two images is the same. I don't think this can be done in CSS from everything I've seen (although possibly with the flexbox model, but I don't know enough about it to say) so I may need a JavaScript solution, but the ones I came up with failed due to either not knowing the overall height of the bounding box, or the fact that adjusting the height of the images affected the height of the bounding box which meant it was constantly re-adjusting itself.
This is an example of arbitrary image heights: https://jsfiddle.net/c6h466xf/
And this is what I'm trying to achieve (although obviously without hard-coding the widths, I want those to be resolved dynamically): https://jsfiddle.net/c6h466xf/4/
This is what I'm starting with (links to JSFiddle need code):
CSS
div.container {
width: 100%;
}
div.container img {
width: 49%;
}
HTML
<div class="container">
<img src="http://i.imgur.com/g0XwGQp.jpg">
<img src="http://i.imgur.com/sFNj4bs.jpg">
</div>
EDIT: I don't want to set a static height on the container element, because that stops it from responding to the width of the overall page, so that the images resize dynamically to each other and responsively to the width of the page, so their total combined width is always (for example) 80% of the page width whatever the viewing device.
If it's responsive, use percentage heights and widths:
html {
height: 100%;
width: 100%;
}
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
div.container {
width: 100%;
height: 100%;
white-space: nowrap;
}
div.container img {
max-height: 100%;
}
<div class="container">
<img src="http://i.imgur.com/g0XwGQp.jpg" />
<img src="http://i.imgur.com/sFNj4bs.jpg" />
</div>
You could set it by height. Give your container div a fixed height.
Here is a solution for you:
div.container {
height:200px;
}
div.container img {
height: 100%;
}
JSFIDDLE
You have 2 other options to get all your images to the same height:
You can place an overflow:hidden on the container div
Or
Clip your images to the same size: http://www.w3schools.com/cssref/pr_pos_clip.asp
Set a class for your images:
<img src="http://i.imgur.com/g0XwGQp.jpg" class="example" >
<img src="http://i.imgur.com/sFNj4bs.jpg" class="example" >
Then you need to set the height of your container:
div.container {
height:200px;
}
In your JavaScript:
var yourImg = document.getElementsByClassName("example");
if(yourImg && yourImg.style) {
yourImg.style.height = '100%';
yourImg.style.float = 'left';
}
This should be a simple code, check the following:
HTML code:
<table class="Table">
<tr>
<td><img src="images/1.jpg"/></td>
<td><img src="images/2.jpg"/></td>
<td><img src="images/3.jpg"/></td>
<td><img src="images/4.jpg"/></td>
</tr>
</table>
CSS:
table { width: 100%; }
table img {
max-width: 100%; max-height: 100%; padding-left: 5px; border: none;
}

Image Stretch and crop to fit the exact size

I have a div containing image inside it,the div overflow is hidden so they image will be cropped if there is excess width or height, it was working fine but some times it does not. what is wrong ? i have tried this
Jquery
$("#covorpic").on("load" , function(){
var covwidth = $("#covorpic").width();
if (covwidth>750){
$("#covorpic").css({"margin-left":(750 - $("#covorpic").width())/2});
}
else{
$("#covorpic").css({"width" : "750px" });
$("#covorpic").css({"margin-top":(200 - $("#covorpic").height())/2});
}
});
html
<div class="covor_cont">
<img id="covorpic" src="someimage.ext">
</div>
css
.covor_cont{
max-height: 200px;
min-height:130px;
overflow: hidden;
text-align: center;
}
#covorpic{
height: 200px;
}
You should be able to do this in CSS, try
.covor_cont {
width: 750px;
}
#covorpic {
max-width: 95%;
}
Set the container to an exact size, set the max-width on the image to shrink if larger than container.

Using JavaScript to center multiple divs in a fluid layout

I'm trying to align multiple divs in the center of a container div. I am using the modulus function to work out the padding needed from the left hand side of the page. Here is the JavaScript I am using:
JavaScript
window.addEventListener("resize", winResize, false);
var width, leftPad, space, boxWidth;
winResize();
function winResize() {
width = document.getElementById('body').offsetWidth;
boxWidth = 350 + 10 + 10;
space = width % boxWidth;
document.getElementById('a').innerHTML = width + '....' + space;
leftPad = space / 2;
document.getElementById('container').style.paddingLeft = leftPad + 'px';
document.getElementById('container').style.width -= leftPad;
};
The HTML is as follows:
<div id="container">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
And the CSS:
#container {
width: 100%;
float: left;
}
#container .block {
width: 350px;
height: 350px;
background-color: 4e4e4e;
float: left;
margin: 10px;
}
My problem is with this code, the padding on the left pushes the container div to the right, which makes the page wider than the window. I have tried removing the padding from the width of the container (in the bottom line of the winResize function) but this doesn't seem to do anything. Is there a way I can remove this "excess div" with CSS padding/margins?
What I can perceive is that you are trying to make container look in the center of your page, js is not required to do it and prefer not use js to position static elements in your page ever.
Here is the css you should use to make it come in center and fluidic
#container {
width: 100%;
text-align:center;
}
#container .block {
width: 350px;
height: 350px;
background-color: #4e4e4e;
display:inline-block;
margin: 10px;
}
Also you can see this fiddle : http://jsfiddle.net/ghFRv/
I would like to know if there is any reason why you want to CENTER an html element?
This is a CSS job and CSS does a very good job at it.
If you want to center your DIVS you could use margin: 0 auto; on the .block.
This would center your layout and keep the elements block level as well.
Your css would look like this:
#container {
width: 100%; /*Remove the float, it's not needed. Elements align top-left standard.*/
}
#container div.block {
width: 350px; /*Makes it possible for margin to center the box*/
height: 350px;
background: #4e4e4e; /*background is the shorthand version*/
margin: 10px auto; /*10px to keep your margin, auto to center it.*/
}
This should get rid of your problem, and makes your page load faster since theres no JS plus, the layout can never be "disabled" due to JS being disabled.
Hope this helped, if it did don't forget to upvote / accept answer
&dash; Sid

Align div with first vertically center div

I have a page, where I'm showing images side by side according to the category they belong to, each image array begins with the category it belongs to. Images vary in their width & height, but are put into a div with an absolute height of 330px.
CSS:
.front-index {
margin: 0 1em 0 2em;
}
.front-work {
margin: 0 2em 2em 0;
display: table;
width: 66px;
position: relative;
height: 330px;
background-color:#f0f0f0;
}
.front-work img {
margin: .3em 0 .3em 0;
}
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.wraptocenter * {
vertical-align: middle;
}
.front-index,
.front-work {
float: left;
}
HTML:
<div class="front-index"><p>How to get<br /> this text on the same line with<br /> yellow image on the right?</p></div>
<div class="front-work">
<div class="wraptocenter">
<img width="162" height="250" src="http://images.fanpop.com/images/image_uploads/Yellow-Wallpaper-yellow-646738_800_600.jpg"/>
</div>
</div>
<div class="front-work">
<div class="wraptocenter">
<img width="250" height="166" src="http://www.takenseriouslyamusing.com/wp-content/uploads/2012/08/Blue.png"/>
</div>
</div>
…
JSFIDDLE: http://jsfiddle.net/rCAKa/9/
I'd like to align the text to the same line as the first image on the right.
What I had in mind, is that may-be this should be done in jquery. Ie. somehow measure the image distance from the top inside the .front-work div and then assign the value to the .front-index div as an inline code (top: whatever px ).
Maybe someone of you have faced this kind of problem and know a solution to this kind of problem? CSS or JS.
In my humble opinion I don't think that what you're doing is possible through CSS - it requires some simple JavaScript trickery because you have to know the relative position (from the top of the container) of the first image on the right in order to position the text - something which CSS isn't quite designed for.
The strategy in JS would be:
Loop through each element with text that you want to position
Fetch the vertical top offset of the first image to the right (relative to containing parent)
Set top padding matching to top position of image. Alternatively, you can set the top position, paddings or margins of the child elements, or other ways to reposition the text.
$(document).ready(function() {
$(".front-index").each(function() {
var fromTop = $(this).next().find("img").position().top;
$(this).css({
"padding-top":fromTop
});
});
});
I have forked your fiddle, and you can see it in action here - http://jsfiddle.net/teddyrised/LT54V/1/
p/s: On a related note, .wraptocenter * { } is probably not the best (as in, most efficient) selector out there, because if you have many child elements in the element (who may or may have even more child elements), CSS will have to iterate through all of them. Instead, try using .wraptocenter > * { } or just .wraptocenter img { } :)
I first tried to solve the problem using css. After a while I figured out the following logics:
Create a div with the same height as the cell on the right with the display set as table
Make a table-cell div in the first one that centers vertically
In this div make another subdiv with the same height as the image.
The HTML code is then this:
<div class="front-index">
<div class="front-index-inner">
<div style="height:250px;">
<p>How to get<br /> this text on the same line with<br /> yellow image on the right?</p>
</div>
</div>
</div>
and as my CSS part this:
.front-index {
margin: 0 1em 0 2em;
display: table;
height: 330px;
overflow: hidden;
}
.front-index-inner {
display: table-cell;
width: 100%;
vertical-align: middle;
}
You can see the result over here: http://jsfiddle.net/rCAKa/10/
I hope this brings a solution to you that is clear, understandable and useful.
Greetings,
Jef

Categories