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%;
}
Related
So I'm working with bootstrap and then I have this images which I want to put on the top right part of the page but it seems that position:absolute is not working so I don't know what I'm missing here. I've googled many times but gives me no luck, I have the same code tho. And also I've tried some of those alternatives or tips and tricks but still doesn't work. So here is my code html.
<body>
<img id="swirl-left" src="assets/images/swirl1-panel1.png">
<img id="swirl-right" src="assets/images/swirl2-panel1.png">
This is the html structure of my images and I have this css:
#swirl-left { position:absolute; left:0; top:-10px;z-index: 2;}
#swirl-right { position:absolute; right:0;top:-11px; z-index: 1;}
I tried float:right but still doesn't make it work. I got this output as of now.
So when I re-size the browser it goes with it.I want it to stuck on the top right part of the page. What I'm missing? If I adjust the browser the images moves with it. It takes me an hour so any help will be appreaciated.
Your code works just fine to pin images to the top-left and top-right corners, if the images are smaller than the body tag.
How large are the images you're using, and how wide is your <body>?
You aren't setting any specific values, so the images are appearing at full size.
Your "output" image looks like all images are the same size as the body, so they're just piled on top of each other.
If you give them all specific width/height attributes in CSS it should work.
In this 2nd example, the images are actually 500x500, which would overlap at full-size, but the CSS width attribute makes them fit properly. You can either use a fixed pixel value, or a percentage if you want the image to be responsive.
body {
width: 900px;
}
#swirl-left {
width: 150px;
position:absolute;
left:0;
top:-10px;
}
#swirl-right {
width: 150px;
position:absolute;
right:0;
top:-10px;
}
Or, since you're using Bootstrap, you could use a class on your img tag to describe the size & # of columns you want the image to take up, like col-sm-2 or something.
<img id="swirl-left" class="col-sm-2" src="assets/images/swirl1-panel1.png">
<img id="swirl-right" class="col-sm-2" src="assets/images/swirl2-panel1.png">
Sorry for my bad english first. Hope anybody can help anyway.
I try to achieve the following: Inside a page i have an image. Since it is in Wordpress a non-pro can edit it. I want on mouse-over an image to scale the content of the image inside the box. (so the image itself should not change its size.) i.e. I have an image of 200 x 200 px. On mouse over i want it to still have this size, but the content inside should zoom. Image size can be different. So i never know exakt measures.
It has to be done on the img-tag i think. No chance to put a div or anything around it. Anybody knows the solution?
Edit: So - i want the image on hover be larger, but be cropped to the size of the non-hover status.
Thank you!
Mike
Add the following styling to the .box.
overflow: hidden;
It sounds like you need a transform:scale
HTML
<div class="box">
<img src="http://lorempixel.com/output/city-q-c-200-200-1.jpg" alt=""/>
</div>
CSS
.box {
width:250px;
height:250px;
padding:10px;
margin: 25px;
border:1px solid grey;;
}
img {
display: block;
transition:all 0.25s ease;
}
.box:hover img {
-webkit-transform:scale(1.25)
}
JSfiddle Demo
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.
I'm finding it tricky to resize images to make them responsive.
I'm developing a php application to automatically convert a website to a responsive version. I'm a little stuck on the images.
I've successfully added a wrapper class to every image on a website and can re-size the images quite well.
My issue lies with images that are naturally smaller than the the window, such as logos and icons. I don't want to resize these.
My code currently converts:
<img src="[src]" />
into:
<div class="erb-image-wrapper">
<img src="[src]" />
</div>
Where I use the following CSS:
.erb-image-wrapper{
max-width:90%;
height:auto;
position: relative;
display:block;
margin:0 auto;
}
.erb-image-wrapper img{
width:100% !important;
height:100% !important;
display:block;
}
This resizes all images, but I only want it to resize images that are over the width of the page. Is the a way I can achieve this via CSS?
.erb-image-wrapper img{
max-width:100% !important;
height:auto;
display:block;
}
Worked for me.
Thanks for MrMisterMan for his assistance.
Use max-width on the images too. Change:
.erb-image-wrapper img{
width:100% !important;
height:100% !important;
display:block;
}
to...
.erb-image-wrapper img{
max-width:100% !important;
max-height:100% !important;
display:block;
}
check the images first with php if it is small then the standerd size for logo
provide it any other css class and dont change its size
i think you have to take up scripting in between
um responsive is simple
first off create a class named cell give it the property of display:table-cell
then # max-width:700px do {display:block; width:100%; clear:both}
and that's it no absolute divs ever; divs needs to be 100% then max-width: - desired width - for inner framming. A true responsive sites has less than 9 lines of css anything passed that you are in a world of shit and over complicated things.
PS : reset.css style sheets are what makes css blinds there was a logical reason why they gave default styles in the first place.
the best way i found was to set the image you want to view responsively as a background image and sent a css property for the div as cover.
background-image : url('YOUR URL');
background-size : cover
Use max-width:100%;, height: auto; and display:block; as follow:
image {
max-width:100%;
height: auto;
display:block;
}
I have a slideshow built using the jbgallery script that I am trying to incorporate into a page on my site. The images in the slideshow have a width and height of 100%. I have a navigation bar at the bottom of the page with a height of 90 pixels.
My code is:
<style type="text/css">
body{ height:100%;
background-color:#444;
margin: 0;}
div.fullscreenslideshow{
display:block;
position:absolute;
top:0;
left:0;
padding-bottom:90px;
width:100%;
height:100%;
background-color:#000;
}
</style>
</head>
<body>
<div class="fullscreenslideshow">
<iframe src="slideshow.html" style="border: 0; width: 100%; height: 100%">Your browser doesn't support iFrames.</iframe>
</div>
</body>
While this looked to have the desired effect it is producing a scroll bar on the page (as the 90 pixel padding is stretching the page beyond the 100% height it has been set to).
Basically, how to I adjust the css to ensure I get the slideshow in the page with a 90 pixel space beneath it, and without cropping the image (by setting the height to 90% for example on the fullscreenslideshow div css) or producing an overflow?
Been playing around with this for hours now and think I have hit the wall hence the request for help! Out of interest, when I adjusted the padding-bottom to margin-bottom there was no effect on the page.
Thanks for any help in advance,
JD
Since your div is already position:absolute; you can simply set bottom:90px to cause the div to simulate a margin-bottom:
div.fullscreenslideshow{
bottom:90px;
}
Why don't you just add a negative margin to the bottom of the container that needs to shrink, so there's no need for javascript?
margin-top: -90px;
edit: I got something
First, add this to your div.fullscreenslideshow
margin-top: -90px
Now, go the page slideshow.html and add this:
margin-top: 90px
To:
div.jbg-loading
.jbgallery .jbg-wrap
.jbgs-wrapper (you will have to add this one to the css yourself, it doesn't exist yet
I got it to work on my computer (compared it to the other link, and it shows exactly the same).
If you can use JQuery you can use this code:
$("div.fullscreenslideshow").css(height: (parseInt($(window).height()) - 90));
run this after load your page complete. And have good time.