I got a div container that has a max height of 400 pixels. I'm placing a pretty large image inside the container. Since the container has a max height it's obviously cutting off most of the picture, which is what I'm aiming for. But my only issue is trying to get the image to center inside the div, so the main part of the picture is shown.
Here is the code I have currently:
<div class="headerimg">
<img src="www.jpg.com"/>
</div>
.headerimg { max-height: 400px; overflow: hidden; }
.header img { width: 100%; height: auto; }
Try using:
div.container {
margin: 0 auto;
width: 900px;
}
div.container img {
max-height:400px;
}
Simple use : text-align:center
live example is here >>>>
div{
max-height:400px;
border:1px solid red;
text-align:center;
}
div img{
height:500px;
width:200px;
}
Related
I have a bunch of images being displayed one at a time in a div. The images are all a few thousand pixels by a few thousand pixels.
For example, one image is 4353x2721.
When I preview the page, it zooms in the picture and cuts out things along only the top and bottom edges. It remains the right width.
I need it to just resize it so that it fits the screen/div properly without cutting any parts.
The CSS for that section is:
.largeImage img {
position:absolute;
top:0;
left:0;
width:100%;
}
If I add height:100%;, it still doesn't work. Still zooms in.
You need to set max-width: 100% and max-height: 100% for image. It will make image to fit its larged dimension to parent container limits and scale down other dimension.
Look at snippet:
.largeImage {
width: 150px;
height: 200px;
display: inline-block;
position: relative;
border: 1px solid green;
}
.largeImage img {
display: block;
position:absolute;
top:0;
left:0;
right: 0;
margin: 0 auto;
max-width:100%;
max-height:100%;
}
<div class="largeImage">
<img src="http://lorempixel.com/output/food-q-c-640-480-5.jpg">
</div>
<div class="largeImage">
<img src="http://lorempixel.com/output/nature-h-c-640-1233-7.jpg">
</div>
<div id="first">Something</div>
<div id="last">something too</div>
<style>
#last {
position: absolute;
margin:0;
padding:0;
bottom:0; /*yes this div is at the bottom*/
}
#first {
}
</style>
My problem is that I can't reach last div with the border of the first div. I want last div to be at bottom and first div to have overflow:auto;? But it doesn't work. When I fill my div some text nothing is showing no scrollbar or anything like that and the first div kind of goes behind the last div even though I haven't assigned them any z-index values.
How Can I solve this? I want my first div to grow until it reaches last div and fill it with text maybe with scrolling appearing when it is only needed. I mean when two divs touch each other kind of.
This will give you a fixed size footer (#last) but the content (#first) expands as needed:
body {
margin: 0px;
padding: 0px;
}
#wrapper {
position: absolute;
top: 0;
bottom: 200px;
left: 0;
right: 0;
}
#first {
background-color: #5588FF;
width: 100%;
max-height: 100%;
overflow-y: auto;
}
#last {
background-color: #FF8855;
position: fixed;
bottom: 0px;
height: 200px;
width: 100%;
}
See this fiddle for the full solution: http://jsfiddle.net/xWa9f/4/
Is this what you want? Fiddle link: http://jsfiddle.net/emw2x/2/
body, html{
height: 100%;
}
#last {
margin:0;
padding:0;
bottom:0; /*yes this div is at the bottom*/
border: 1px solid black;
width: 100%;
height: 10%;
}
#first {
border: 1px solid red;
height: 90%;
width: 100%;
padding: 0;
margin: 0;
overflow: auto;
}
Give that a try to see if that's what you want.
if you accept some javascript in the mix, i have this solution for you.
first, change the absolute positioning to fixed positioning of the #last div.
set overflow:auto to the #first div and the javascript does the rest (you need jQuery):
(function () {
var heights = window.innerHeight;
var outerHeights = $("#last").outerHeight(true);
jQuery('#first').css('height', (heights - outerHeights) + "px");
})();
basically it calculates the window height of your monitor, it subtracts the height of the #last div and gives what's left to the #first div. when the content exceeds the available pixel height, a scroll bar will appear.
check it here: http://jsfiddle.net/vlrprbttst/rR7Uu/2/
the plus here is this works at any window resolution, so you don't have to worry about screen resolutions and you don't have to worry about the height of your #last div (margins, paddings, borders, whatever included)
How can I center a div that is holding other elements. As default it seems that the div has the width of its parent tag, in this case body. What I want to do is center the div, do I need to set the width of it myself pixel by pixel? or is there an easier way of doing this.
Image of what Im talking about
In the picture you can see Ive set the width of div #container to 250px to center it with margin: 0 auto; but now its bigger than table which means the children of #container isn't in the exact center.
DEMO 1
<div id="container">
</div>
#container{
display:table;
margin:0 auto;
}
DEMO 2
<div id="container">
<span id="form">
</span>
</div>
#container{
text-align:center;
}
#form{
display:inline-block;
text-align:left;
}
How bout setting top and left 50%, fixing the position and margins=size of your div?
div {
position: fixed;
top: 50%;
left: 50%;
margin-top: -your size;
margin-left: -your size;
}
You could try percentages rather than px
<style>
#container{
width:30%;
/* width:250px; will still be ok */
}
#container table{
width:100%;
/* This will make the table stretch or squash to fill the container */
/* You could also try */
margin: 0 auto;
/* This will center the table inside the div*/
}
<style>
Set the parent div to text-align: center; and the div containing the content to display: inline-block;
In your case:
body {
text-align: center;
}
#container {
display: inline-block;
}
I would like to create a scrollable div. I know here is lots of example, but neither of them works for me.
I have a .page class, which fills my mobile's screen. Inside of it I have a .content div. This is contain the content of the pages. It is just align the content from the top, and it should have to scroll the content if it is going out of the .content's boundaries.
.page{
margin: 0;
padding: 0;
min-height: 100%;
width: 100%;
display: block;
}
.content{
padding: 4em 0 0 0;
overflow-x: hidden;
overlofw-y: auto;
/*-webkit-overflow-scrolling: touch;*/
}
What should I do to get it working?
Update
I tried it in fiddle, and it is worked. But not on my phone. Because of it I don't know where should be the problem.
Because of it I attached my whole code to the question. This is very important for me to get it working.
Please help me. Thanks for any help. :)
Is this what you need??
html, body{
height:100%;
margin:0;
padding:0;
}
.page{
margin: 0;
padding: 0;
height: 100%;
width: 50%;
display: block; border:solid #000 1px
}
.content{
padding:0;
overflow: scroll; overflow-x:hidden;
height:100%
/*-webkit-overflow-scrolling: touch;*/
}
span{
padding:4em 0 0 0;
display:inline-block
}
DEMO
Use span tag to specify the padding for content div coz if you give padding to the content div it calculates as additional height 100%+4em so..
And make sure that you are specifying html and body height as 100% whenever you want to use height:100% in your page.
You need to get window height for that and need to set it for .page. Anyway, you may need to add some javascript for that. I used jQuery for solution. [you can use other library, its up to you. I am suggesting you this solution]
Here is markup:
<div class="page">
<div class="content">
</div>
</div>
CSS:
* { margin:0; padding:0 } /* using * for demo _ you should use proper reset */
html, body { height:100%; height:100% }
body { height:5000px; background-color:#F7F7F7; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:1.6em }
.page { background:#A2A2A2; width:200px; height:600px; overflow-y:scroll; position:fixed }
.content { background-color:#4D4D4D; padding:10px; color:#B7B7B7; }
JS:
$('document').ready(function(){
var wHeight = $(window).height();
$('.page').css({
'height' : wHeight + 'px'
});
});
Just see this fiddle link - (live demo) - http://jsfiddle.net/LZT7B/
I'm looking to recreate the effect here on images 2 and 3: http://www.jessicahische.is/illustrating/penguinsinbathingsuits
These images obviously have "padding" filled in already by the image itself, but I was wondering if this effect is possible with just jQuery and CSS?
Any help or insight would be great, thanks!
A simple method for centering items. Try something like this:
.box {
display: block;
height: 500px;
width: 500px;
background-color: #eee;
margin:0;
padding:0;
vertical-align:center;
}
.center_item {
display: block;
height: 100px;
width: 100px;
background-color: #aaa;
margin:0 auto;
padding:0;
}
And the corresponding HTML.
<div class="box">
<div class="center_item">Put your image here.</div>
</div>
What this does is simply puts a container around whatever you need to be centered. By using margin:0 auto; you can center any item within it's parent. I hope this is what you were looking for.
jsBin demo
In this example, we use text-align:center; for our element #gallery
and force the image to be 100% height.
Than with jQuery we check that image on .load() to see if the image width exceeds the gallery width. In that case we'll change the width and vertical-center-alignment with jQuery. E.g:
CSS:
#gallery{
position:relative;
margin:0 auto;
width:600px;
height:500px;
border:1px solid #aaa;
text-align:center;
}
#gallery img{
height:100%;
}
jQuery:
$('#gallery img').load(function(){
img = $(this);
imgW = img.width();
if(imgW > $('#gallery').width()){
img.css({width:'100%', height:'auto'});
img.css({marginTop: $('#gallery').height()/2 - $(this).height()/2 });
}
});
Play with the images widths/heights to see how they respond.