I just noticed in vk.com that the images in your album have fixed width but the height is also fixed but images are cut like in the middle.And if i copy the path to the images and view only them they are not cut.
i make this photo to be more easy to understand
How this is done ?
Their containers have a fixed height with overflow:hidden set.
HTML:
<ul>
<li><img src="//lorempixel.com/100/100/"></li>
<li><img src="//lorempixel.com/100/200/"></li>
<li><img src="//lorempixel.com/100/300/"></li>
<li><img src="//lorempixel.com/100/400/"></li>
</ul>
CSS:
li { float:left; height:100px; overflow:hidden; margin:10px; }
Demo: jsfiddle.net/tbedf
The images can be put in a container div that has a fixed height and then set the container div to overflow: hidden. This will clip any child objects that are larger than the container. The clipping is at display time only, the images themselves remain unchanged.
You can see an example of an image containing div where you can toggle the overflow settings between hidden and visible in this demo: http://jsfiddle.net/jfriend00/npzjn/.
Related
i am showing content with php and mysql and there is a field for a photo
which has a % kinda width and i set the height with jquery to have a square
and then give the images with bigger width a bigwidth class and the ones with bigger height a bigheight class so i can give them diffrent styles the one with the bigger width gets 100% width and auto height
and the one with the bigger height gets height 100% and auto width
but with the bigger width images there is a vertical alignment problem for the photos and i cant use display table cell so i though to use padding top with jquery to fix this but since images with bigger width have diffrents ratios there should be diffrent amount of padding for each
so i want to select the parent of each bigwidth photo then get its child height then set the needed padding but i dont know how
<div class="imgpro"><img src="<?php echo("admin/uploads/".$rowpro["propic"]) ?>" class="<?php $size=getimagesize("admin/uploads/".$rowpro["propic"]);
$wsize=$size[0];$hsize=$size[1];
if($hsize>$wsize){echo("bigheight");}
else{echo("bigwidth");}
?> "/>
</div>
var a=$(".product .imgpro").css("width");
$(".product .imgpro").css("height",a);
.product .imgpro img.bigheight{height: 100%;width: auto;}
.product .imgpro img.bigwidth{width: 100%;height: auto;}
im trying to select all images parents and give them padding based on the image size in them
I have the below structure:
<div class="wrapper1">
<div class="left">some img here with 100% width and some text which dispaly on hovering over the image</div>
<div class="right">some content here</div>
</div>
<div class="items">
<ul><li></li></ul>
</div>
The above layout is used for a responsive site. so on resizing the window or on page load on different devices the content in the right div should always remain of the same height as that of the left div.
Also, I have to append a link "more >>" responsively where the last character of the content in the right div ends.
I have used overflow hidden property for the right div and I am trying to give some height to the right div based on the window width using media queries. Have tried different things but since the text amount changes responsively it is becoming difficult to append more link to the last character.
Also, i tried using jquery/jscript to detect the height of the left div on page load so as to set the height of the right div same as that using .outerheight() property but on initial load of the page I am not able to get the height in pixels since the width of the image inside the left div is set to 100%.
Also, there are 2 main issues here,
1)I set the height of the left div same as that of the right div responsively. Here the extra content to be displayes in the right div should always be hidden.
2) append more link just where last last charcter of the last visible line of the content on the left div is responsively.
Could anyone please suggest some solution.
With flexbox the columns share the same height automatically, without any javascript.
.wrapper {
display: flex;
}
.left {
background: yellow;
flex: 1;
}
.right {
background: red;
flex: 1;
}
<div class="wrapper">
<div class="left">some img here with 100% width and some text which dispaly on hovering over the image</div>
<div class="right">some content here</div>
</div>
I believe all your problem will be solved if and only if you use bootstrap css rules the grid system and furthermore make a class with specific height and assign it to the div . And more advice get familiar with media query in css3
Create a div with relative position for appending links and make it in the bottom of the container div
Is there a way using css and html to control the maximum scrollable height of a page, regardless of the content which is present on the page?
For a concrete, hypothetical example: say the <body> is incredibly simple - a <div> which is 5000px tall. How would you set the scrollable height to be only 2000px?
Thus it would appear that the 2000th pixel is the last pixel on the page. The browser's scroll bar would appear to be at the bottom, not just "stuck" halfway down the page. Am I missing something simple to achieve this behavior? I would prefer pure css/html because it seems like it should be doable, but I would accept js.
You can do something like this
HTML
<div class="outer">
<div class="inner">
<!--your content here-->
</div>
</div>
CSS
.outer {
height:2000px;
overflow:auto;
}
.inner {
height:5000px;
overflow:hidden;
}
You should set the body height to a specific number and set overflow to hidden.
body{
height:2000px;
overflow:hidden;
}
Made an example here
Use max-height or height css properties and overflow:hidden on your container element. It will hide everything that is greater than the height you specify, therefore limiting the scrollbar height.
I should also mention that you can use overflow-y:hidden will achieve the same thing, but will only affect top and bottom edges of an element. See more details here.
I have a question about scaling a website linearly.
I want the website or more specifically a DIV in which some elements are centered in to
scale down proportionally...
The HTML is:
<div id="header">Some Content with naviagtion</div>
<div id="slider">This Div should be scaled down...
<img src="some images that are centered in the content Div"
</div>
So I tried this CSS:
#media screen and (max-width:1919px) {
#slider{position:fixed;top:0px !important;bottom:0px !important;transform: scale(.75);-webkit-transform: scale(.75);-moz-transform: scale(.75);-ms-transform: scale(.75);-o-transform: scale(.75);width: 200% !important;height: 200% !important;margin-top:-30% !important;margin-left:-50% !important; }
}
which works, but I have to set manual margins for all different resolutions...
So I want to scale down the whole #slider div that it fits to the screen so that top , left, right and bottom are 0 ... and the div is scaled down So everything is viewable also on little screens ... (some images are Full-HD ...)
Is there any way to make this automatically? Maybe with jQuery?
Best regards
Dave
Suppose we have a DIV element like this:
<div id='parent'>
<!-- The childs will come here -->
<div id='footer'>This is footer</div>
</div>
and this function that create HTML elements dynamically and inserts them into the div#parent
function addChild(name)
{
$("<div></div>").text(name).prependTo( $("div#parent") );
}
CSS:
div#parent
{
height:400px;
background-color:yellow;
}
div#footer
{
/* height: ??? */
background-color:red;
}
Now I want, the element div#footer covers whole available/remaining height of the element div#parent, How I can do this by CSS or Javascript?
Thanks
Another solution using CSS. The solution here is using display:table and display:table-row
div#parent
{
display:table;
height:400px;
width:100%;
background-color:yellow;
}
div{
display:table-row;
height:20px;
}
div#footer
{
/* height: ??? */
background-color:red;
height:auto;
}
http://jsfiddle.net/aawbE/
If you simply want the footer to always be at the bottom of the page, then I would suggest checking out http://www.cssstickyfooter.com/. They have a great concept for making sure that the footer will either be at the end of the content, or touch the bottom of the page.
Example
If you want the footer to cover the entire bottom portion of the screen (beginning where the content ends and ending at the bottom of the screen) then you do need to know the total height being used by all of the elements inside of the "container" element as well as the height of the "container" element.
An easy way to do this is to put all child elements into a different div (the height of which you can easily track.
//find the difference in height between the
//"parent" div (minimum of 100% of page height) and
//the "main" div (the total height of its child elements)
height = document.getElementById('parent').offsetHeight -
document.getElementById('main').offsetHeight;
//Set the top margin of footer to minus the height
//(make footer go up 'height' number of pixels
document.getElementById('footer').style.marginTop = -height+'px';
//Set the height of the footer to 'height'
document.getElementById('footer').style.height = height+'px';
It's important to note that these calculations are based off of the cssStickyFooter code. This makes sure that the bottom of the footer remains at the bottom of the screen (unless it passes the bottom of the screen).
Example
For this example I added a green border around the 'main' div so that you can see where it ends. I also make sure to change the footer whenever the page is re-sized in case the child elements move around (re-size the page to see this happen). I also added a min-height to the footer so there will still be a footer even if #main.height >= #parent.height.
I hope this helps.