I have a div containing an image (img) element, which extends for 100% width inside it. I would like to specify a maximum height for the div, and hide the parts of the image exceeding this height. But I also want to keep this image centered vertically inside the div to show only its central part.
For example, if browser width is 1200px and image aspect ratio is 4:3, image should display (1200x900)px. But if we want to crop height to 300px only and center vertically, image should position at -300px inside the div (and the div should hide 0-300 and 600-900 of the image height). Similar thoughts can be done for other widhts.
I'm pretty sure this can be easily done with javascript, but I would like to know if there is a way to do it with CSS too. Thanks in advance!
My take on this: http://codepen.io/vsync/pen/DpmnK
HTML
<div class='box'>
<img src="http://www.biztalk360.com/Events/BizTalk-Innovation-day-2014-Norway/images/banner.jpg">
</div>
SCSS
.box{
// this is the image container distentions
width:100%;
height:100px;
// The magic
> img{
position:absolute;
z-index:-1;
top:50%;
left:50%;
width:100%;
transform:translate(-50%, -50%);
&.max{ width:auto; height:100%; }
}
}
javascript (this is only for responsiveness)
var photo = document.images[0],
container = document.querySelector('.box');
$(window).on('resize.coverPhoto', function(){
requestAnimationFrame(checkRatio);
});
function checkRatio(){
var state = photo.clientHeight <= container.clientHeight &&
photo.clientWidth >= container.clientWidth;
photo.classList[state ? 'add' : 'remove']('max');
}
You may want to look at this question : Resizeing an oversized image using overflow:hidden and keep the aspect ratio
http://codepen.io/gcyrillus/pen/Grbxg
.grid_3 { width:260px; margin:0 20px; float:left; text-align:center;
overflow:hidden;background:rgba(255,255,255,0.02);}
.grid_3 a {
display:block;
height:171px; border:solid 2px #FFFFFF;
line-height:168px;
overflow:hidden;
margin-bottom:10px;
}
.max-img-border { width:100%; margin:-100% 0;vertical-align:middle;
}
here is another pen , exploring this , vertical-align:middle and an image with virtually no height in the flux.http://codepen.io/gc-nomade/pen/DxCgv
Of course , image set in background center is easy if it has no meaning in your content.
So you want the div to function as a viewing window for your image? This sounds like image sprites (a large pic of icons put together where each icon is displayed individually) but with a larger image:
http://www.w3schools.com/css/css_image_sprites.asp
If you provide a JSFiddle, I can give you something more specific.
Related
I'm trying to use a div as a divider inside of another div and it's not showing up. I figured if I set the height on the divider div to 100% it would automatically adjust to the height of the containing div, which I have set to "auto" for the height.
If I change the height of the containing div to an exact pixel amount the dividing div kicks in and works fine. The reason I want it to adjust automatically is because there will be multiple instances of the containing div with different content which will make the height vary from one to the other so just setting an exact pixel amount for all of them won't be sufficient.
Here's the CSS I created
.container{
width:600px;
height:auto;
margin:auto;
float:left;
display:block;
}
#divider{
width:4px;
height:100%;
float:left;
display:block;
}
Is my coding wrong or is there something else at play that makes this not possible? Thanks in advance for your assistance.
100% is relative to the parent. Try making it 100 vh. Codepen
#divider{
width:4px;
height:100vh;
float:left;
display:block;
}
This is my html code
<div class="feature-image">
<a class="featured_image_link" href="#">
<img src="1.jpg">
</a>
</div>
My image 1.jpg size is 150px x 150px and i have mentioned in the css as
.feature-image{
width:150px;
height:150px;
display:block;
position:relative;
overflow:hidden;
}
.feature-image img{
position:absolute;
top:-50;
left:0;
width:100%;
}
I know that when i give different image size (for eg: 300x200 or 600x350 etc) the image will fill inside that 150x150 and not stretches.
But actually its not working properly. Please help whether there is any mistake in this code?
Ok. Let me explain how this work.
First things first. Your CSS has a bug.
top:-50;
This wont do anything. It has to be something like
top:-50px;
But my question is why do you want negative margins? it will only hide you image by 50 pixels on the top side.
Ok, now coming to the real issue. You say you have no problems when your Image is 150X150 pixels. Thats because the parent <div> is 150x150. But if you have a different image size like 300x200 you have a problem.
This happens because in your CSS you have only mentioned width: 100% for the image.From here on its plain math.
The width=300 & height =200
Since you have mentioned width:100% the image automatically gets adjusted to the new width
300(original width)/150(new width)=2
So taking the same factor of 2
200(original height)/2=100(new height)
Hence you rendered image will have height of 100px.
if you want the rendered image to have same height of div just add this line to img CSS
height: 100%;
Working fiddle
from the code you have pasted, it's working properly. Are you able to link to the site where this is live and not working? Cache issue?
See jsfiddle: http://jsfiddle.net/FNQZn/
.feature-image {
width:150px;
height:150px;
display:block;
position:relative;
overflow:hidden;
}
.feature-image img {
position:absolute;
top:-50;
left:0;
width:100%;
}
I'm trying to center an image vertically inside the div. I've read few other similar questions here on stackoverflow and decided to use this solution:
<div id="wrapper">
<div id="cell">
<img />
</div>
</div>
#wrapper {display:table;}
#cell {display:table-cell; vertical-align:middle;}
This works great for images smaller than the viewport size. Problem occurs when image is larger in height than the view-port. In that case wrapper div simply becomes the height of the image. And it overflows the page. How do I avoid that.
This wrapper div is part of view-port div. Viewport div is of fixed height and 100% width positioned absolute
#view-port{ height: 600px; width:100% }
EDIT: I think I caused some confusion regarding the question. I've created JSfiddle to explain what I mean
Here is a link: http://jsfiddle.net/sublime/fgTtj/
I want to vertically center the image inside #outer I dont have image dimensions, as you can see on fiddle, it works perfectly, but when #outer divs height goes less than image height, say 200 it cuts the image. I want to instead shrink that image to fit the outer div
This answer has been truncated and edited to meet the needs of the OP.
Using jQuery, here is what I would suggest.
You can get rid of several of your divs and just use a wrapper and your image. The problem with your code above is that you gave your outer div a set height at 300px. This means that it won't ever shrink smaller than that. I've written a small script to account for the window size as well
http://jsfiddle.net/fgTtj/40/
I've set up your HTML like so:
<div class="wrapper">
<img src='http://s13.postimg.org/b7hmfvhyv/css.jpg'></img>
</div>
CSS like so:
.wrapper {
position:relative;
width:100%;
height:300px;
background-color:blue;
overflow:hidden;
}
.wrapper img{
position:absolute;
max-width:100%;
max-height:100%;
}
and the new jQuery looks like this:
function center(){
var imgW = $('img').width();
var imgH = $('img').height();
var half_imgW = imgW / 2;
var half_imgH = imgH / 2;
$('img').css({
left: "50%",
top: "50%",
margin: "-" + half_imgH + "px 0 0 -" + half_imgW + "px"
});
}
$(document).ready(function(){
var wrapper_Height = $('.wrapper').height();
center();
$(window).resize(function(){
console.log(wrapper_Height);
var winH = $(this).height();
var wrapH = $('.wrapper').height();
if(winH <= wrapH){
$('.wrapper').height(winH);
} else {
if(wrapH <= wrapper_Height){
$('.wrapper').height(winH);
}
}
center();
});
});
You can resize this window in any direction and the image will stay centered and not cut off. This only works for one window at the moment, so you would have to adjust the script to accomodate more.
The awesome thing with this is that it will run in just about every browser, where display:table-cell does not work in older browsers such as IE6 and I think IE7.
What is the point of the display:table? You could leave it blank (or use display:inline-block), and add an overflow property.
#wrapper{
overflow:hidden;
}
If you want to be able to scroll to see the rest of the image:
#wrapper{
overflow:scroll;
}
If you don't want the image to extend the viewport height, set the max-height:
#cell img { max-height: 600px; }
I'm working on building a mobile friendly site of our companies main website. The way it is designed is around 2x for retina. What I'm planning to do is set the main content around a maximum width of 640px, width set at 100%. I have a certain background image that fits nicely do that. But as the width of the div gets smaller, I need the height to adjust as well. Any ideas?
Here's the css:
*{margin:0;padding:0}h1,h2,h3,h4,h5,p,li,a,cite{font-size:14px;font-weight:normal}button,img{border:0}body{font-family:Arial, sans-serif;}
body {
margin:0;
background-color:#fff;
}
.top, .body {
max-width:640px;
width:100%;
margin:0 auto;
}
.top {
background: white url(images/top.jpg) no-repeat;
background-size:auto;
overflow:hidden;
height:124px;
max-height:124px;
}
.top ul {
list-style:none;
height:100%;
}
.top ul li {
height:100%;
float:left;
display:block;
}
I did find an answer to this. It adds a little bit of unsemantic markup, but works well.
Can find it here: http://jsfiddle.net/AdQ3P/
The logic is in the padding-bottom. basically this needs to be (img_height / img_width) * 100.
Edit Here's the code, so not dependent on jsfiddle.
<div class="container">
<div class="hero"></div>
</div>
.container {
width:100%;
max-width:500px;
}
.hero {
width:100%;
height:0;
background-size:100%;
background:url(http://img97.imageshack.us/img97/3410/photo2ue.jpg) no-repeat;
padding-bottom:75%;
}
Also that was one messy desk i had lol.
You can also use a little jQuery. I believe the advantage is that it is a semantically valid fix, so the next guy who edits your code might have an easier time understanding what's going on.
// Maintain aspect ratio of #my_div
// Set aspect ratio of #my_div
var aspect_ratio = 0.8;
// Store the jQuery object for future reference
var $my_div = jQuery("#my_div");
// Within your document ready function,
// Do an initial resize of #my_div
$(document).ready(function(){
$my_div.height( $my_div.width() * aspect_ratio );
});
// Resize #my_div on browser resize
jQuery(window).resize(function() {
$my_div.height( $my_div.width() * aspect_ratio );
});
while a non-fixed width (e.g. 100%) takes all the container's width, the height of an element when not set to a fixed size will stretch to accomodate any in-flow content (including padding, margin, borders...)
if you can use an <img> tag instead of a background image, you can then apply max-width:100% to the image itself and it will scale to fit the container - the browser will take care of resizing its height to keep the aspect ratio consistent - however replacing a css background with an image tag is not always possible or the best option in terms of semantics and/or any layout issues you may face.
Working very well without a set height or img using the new relative font sizing units, e.g. vm (http://www.sitepoint.com/new-css3-relative-font-size/).
I have the following html:
<div id="thumbs">
...8 image tags width and height of images 100 x 100px
</div>
The related CSS is:
#thumbs
{
overflow:hidden;
float:left;
position:relative;
background-color:white;
height:100px;
width:100%;
}
#thumbs img
{
padding:5px;
}
When I turn my resolution down to the lowest setting -800 x 600, the last image -img8 jumps over to the next line. I would like all the images to show in one line. Is this possible?
You have 8 images equaling 100px wide each. The width of the window is 800px. You also have 5px padding on each image which then makes the whole structure 880px wide. Reduce each image size to 90px and you should be good. Also take into account the scrollbar if there will be scrolling that is another 20-30px.
have you tried setting a min-width on the container
#thumbs {min-width: 880px;}
width derived from 8 x 100px wide images with 10px padding (5px left + 5px right) each.
Have a look at responsive web design techniques that may help.
The problem you have is you're trying to put 880px into a space of 800px, this is 800px for the images then padding of 10px for each image you have in the div giving the additional 80.
The basic solution I would use is to put in a media query like
#media screen and (max-width: 810px) {
#thumbs img {
padding: 3;
height:80px;
width:80px
}
}
What this saying is if the width of the window is under 810px then apply this styling to the elements. Why 810px? To be safe basically.
To keep the consistency of the design we do need to reduce the image sizes and the padding, you will need to play with these variables depending on how they actually look on the screen.