Newbie question here. in my CSS i have a div with overflow hidden in which i am displaying images. Some images are tall (varying sizes) which poses a problem. wide images are ok when scaled down.
with the tall images my div is showing the image "head downwards" which is normal. however with my type of images the top is not so important (yacht mast and sails). is there a way i can display images in the div with the top cut off instead of the bottom?
Any ideas? Thanks Guys
Jay
You can try something like this:
.image{
height: 150px;
overflow: hidden;
position: relative;
}
img{
position: absolute;
bottom: 20px;
}
see this bin:
in your css try
div.image_class{
overflow-y:hidden;
}
div.image_class img{
position: absolute;
top: 0px;
}
Try this HTML:
<div class="hide_top">
<img src="http://www.liveyachting.com/wp-content/uploads/2009/02/brenta-yacht-b60-4.jpg" alt="" />
</div>
and then apply this CSS:
.hide_top{width:50%; height:auto; max-height:400px; overflow:hidden; display:block;}
.hide_top img{width:100%; height:auto; transform: translateY(-50%); -webkit-transform:translateY(-50%); top:50%}
See fiddle here and play around with values
You could do a margin-top: -Xpx on the images and set up classes for each image size. For example
<div class="imgHold">
<img class="img400x800" src="..." />
<img class="img800x400" src="..." />
<img class="img400x400" src="..." />
</div>
.imgHold {
overflow: hidden;
}
.img400x800 {
margin-top: -200px; /* set to how much it needs to be offset */
}
.img800x400 {
margin-top: 50px; /* set to how much it needs to be offset */
}
.img400x400 {
margin-top: 0px; /* maybe this doesn't need any offset */
}
