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;
}
Related
I'm using centered imgs to act as backgrounds for some tiles. I'm trying to have these images scale with their parent div's height and if they are wider then their parent's for them to hide the overflow.
Example:
* I've got it working now. Answers are below, I'm updating this code to display all I needed to use to get it to work *
HTML
<div class="container">
<img class="derp" src="http://gridiculo.us/images/kitty02.jpg">
</div>
CSS:
.container {
height:250px;
width:50%;
}
.derp{
object-fit: cover;
height: 100%;
width: 100%;
}
Here's a near-example: http://codepen.io/chriscoyier/pen/myPMGB
The difference would be that I'm using s and not background-image, and that instead of the img filling the div completely it would fit to the height and hide the width overflow.
I'm trying to avoid using background-image since I'm using a lot of these tiles and making CSS rules for every one isn't going to work.
In order to scale it with the div's height, I'd change the height from px to % - this way, the larger's the div, the larger's the picture. In order to certain the image, i'd use margin in the image css. That'd look like so:
.derp{
height:80%;
width:80%;
margin:10%;
}
.container {
height:250px;
width:50%; /* needed */
/* inner img is centered horizontally */
vertical-align:top;
text-align:center;
overflow-x:hidden;
}
<div class="container" style="background-color:gray"> <!-- The background is there so you could see the image relative to the div -->
<img class="derp" src="http://gridiculo.us/images/kitty02.jpg">
</div>
The best way to keep the aspect ratio of the image is to set the width to auto (and it's the default behavior so you don't need to set explicitly). And with a simple overflow:hidden it works almost as you want it.
The hard part is centering horizontally. You can try this answer :css to center a image horizontally.
However if all your images aren't the same size, you will need to make one rule per image. And in this case putting the image as background-img would be better for semantic and accessibility (because your image doesn't have a sense in the page, it doesn't convey any information, it's decoration). An <img> would be read by a screen reader (the alt attribute), and in your case it wouldn't help a blind people.
Depending on how many browsers you need to support, I'd suggest you use object-fit! Support for it is okay if you can ignore IE, but in case your project qualifies, I see no problem with using it today. Also, there is always a polyfill.
You can find a nice summary on CSS-Tricks.com about the property. It basically works similarly to background-size, but for <img> tags. In your case, object-fit: cover; does the trick.
I made a little demo on CodePen that shows you how it works.
img {
height: 100%;
object-fit: fill;
width: 100%;
}
I have two styles defined:
img.feedback-sprite-22{
display:block;
background:url(../img/feedback-sprite-22.png) 0px 0px scroll;
height:22px;
border:0 !important;
padding:0;
margin:0 !important;
z-index:0;
}
img.feedback-sprite-22:hover{
background-position:0px -22px;
}
img.fb {
display:inline;
margin:auto 0;
border: none !important;
vertical-align: middle;
}
And I display the image like so:
<img class='fb feedback-sprite-22' height='22' width='65'>
Works great in ff & chrome but not ie (i've tested ie10 and ie8). IE shows the image (is it a simple gradient), but also shows the square img missing box (see below). Any ideas how to fix this? Thanks in advance.
Because you have no src in your img tag, which is needed.
Use div <div class="fb feedback-sprite-22"></div> instead of img. And define width and height in css. If you realy want to do it using css...
But in my opinion you should use clear img - like <img src="/img/feedback-sprite-22.png" alt=""> and not background in css for element like this.
If its just a gradient, why not using a CSS, gradient?
http://www.colorzilla.com/gradient-editor/
With support for every broweser including IE6-10
So the answer, I've discovered, as Choinek pointed out, is that IMG obviously has to have 'src' defined for IE. I assigned it to blank.gif and all is good. Since I already use a blank.gif on the site, it isn't another image to load.
However, I really like the idea of using a CSS gradient. This would reduce the number of images (always good).
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 realise this question has been asked multiple times in differently worded titles and options, but i have yet to find something that works for me.
Im trying to have an img fill most of the screen (keeping its aspect ratio) without overflowing the edges. (Basically what the firefox browser accomplishes when viewing an image)
Most that i've tried either works in only one direction ie. width will resize but will end up overflowing the height and the same for the other way, either with CSS or JScript. Also playing a factor in my trouble is that i want to aplly this to both portrait and landscape images (More or less any image i have on the site)
This seems like it should work using pure CSS but doesnt (im not completely knowledgeable in all CSS though):
Link to JSFiddle
body, html {
margin:auto;
padding:6px;
height:100%;
width:100%;
}
img {
max-width:100%;
max-height:100%;
}
There are a hand full of other scripts as well, but this post is getting a bit long.
Could anyone help me out containing my images within the screen, with either JQuery or CSS (within or without a DIV)
Thanks in advance,
Try this jQuery plugin: TailorFit
and check out the demo.
You can play around with various options in the demo to figure out if this could work for you. The browser support is extreme because it only uses jQuery and relative positioning.
Full disclosure - I'm the author of the plugin.
Now define your html, body height 100%;
as like this
body, html {
height:100%;
}
MY ANSWER:
I ended up just wrapping the image in a div and setting the div dimensions in CSS:
PURE CSS Resize
Unfortunately this method may look quite horrible in older browsers but it has atleast got me out of a pickle and its a tiny piece of styling.
Hopefully i can find some jQuery alternative soon.
body, html {
width:98%;
height:98%;
}
.outer {
position:fixed !important;
position:absolute;
margin:auto;
text-align:center;
top:10px;
right:0;
bottom:10px;
left:0;
}
img {
max-width:100%;
max-height:100%;
padding:4px;
background-color:#fff;
}
----
<div class="outer">
<img src="whatever.jpg" />
</div>
UPDATE: I have tried the suggestions below, but I'm still facing the same problem. I've edited the code below to reflect the new stylesheet. If it helps, the page in question is http://japanesenostalgiccar.com/2011/05/06/friday-video-nissan-cedrics-vs-s30-fairlady-z/
In my wordpress blog I'm trying to create a stylesheet where an image or embedded youtube video is 640px wide, while the text beneath it is only 600px wide.
The wordpress-generated HTML looks like this:
<div class="entry-content">
<p>
<a href="uploads/2011/05/ball.jpg">
<img class="alignnone size-large wp-image-15139" width="640" height="211"
src="uploads/2011/05/ball.jpg" title="Ball" />
</a>
This is a baseball.
</p>
</div>
My external CSS file has the following:
.entry-content p{
overflow: visible !important;
padding : 0px 20px 0px 20px;
}
.entry-content p .alignnone, iframe{
overflow: visible !important;
width : 640px !important;
padding : 0px !important;
}
img.alignnone.size-large{
overflow: visible !important;
width: 640px !important;
padding : 0px !important;
}
However, the image (and the text) always displays at 600px, while the embedded youtube videos (using the iframe tag) display at 640px.
Thinking it was a specificity issue, I even added
style="width: 640px;"
as an IMG attribute, but no dice. Thanks in advance.
Based on your updates, I looked at the page in question. I think I might have an answer for you.
Check out the styles that your theme "TwentyTen" is inserting starting at line 778:
/*
Resize images to fit the main content area.
- Applies only to images uploaded via WordPress by targeting size-* classes.
- Other images will be left alone. Use "size-auto" class to apply to other images.
*/
img.size-auto,
img.size-full,
img.size-large,
img.size-medium,
.attachment img {
max-width: 100%; /* When images are too wide for containing element, force them to fit. */
height: auto; /* Override height to match resized width for correct aspect ratio. */
}
The 'max-width: 100%;' line seems to be the issue. Using Firebug, I just turned that style off for a second and the picture of the Nissan snapped out to be full-width. So to solve it, you should be able to add this to your own stylesheet:
max-width: none;
I hope this helps!!
You have another class on the image of "size-large" - did you check to see what that style is doing to the image? Does that style possibly have a "!important" declaration in it?
I don't know what the other classes on your img are doing, but maybe you could try something like this:
img.alignnone.size-large {width: 640px !important;}
simple:
.entry-content p .alignnone, iframe{
width : 640px;
}
this will take the child element of p, and set it at 640px;
However, you might need to set the
.entry-content p{
overflow-x:visible
}
The image is only 600px wide because of the padding on the paragraph tag.
If you want to display the image and the iframe at 640px, you can add the following:
to the image:
img {
margin: 0 -20px;
display: block;
}
to the iframe:
iframe {
margin: 0 -20px;
}
Did you try separating the div's i.e. tags for the text beneath & that contains the image/video ?
Keep the container that holds (iframe & text) consistent.
Separating the divs for inner elements of the container is a better option.