I am using image slider specified at: here
My images are of different sizes and I want to set the width and height of the image using following code:
<img src='77.png' width="20px" height="20px" />
But this doesnt work.
I am preety new to javascript, any help will be greatly approciated!
I really don't think this code can handle it (perhaps with a very serious overhaul of the javascript). I set up a fiddle here: http://jsfiddle.net/JLjCP/9/ and in examining what it is doing, it simply does not care what size the image itself is nor does it care if you have resized the image explicitly through the width and height properties. It is only taking the referenced image file and using it as a repositioned background image for the split components which are purely sized by the width and height of the display and the number of sections you tell it to do it in.
So the short answer is this code will not do what you want it to do.
put this in your css :
.cs-coin-slider
{
/*i think the class name is depend on what you set*/
-o-background-size: 20px 20px;
-webkit-background-size: 20px 20px;
-khtml-background-size: 20px 20px;
-moz-background-size: 20px 20px;
background-size: 20px 20px;
}
if you insist to use this coin-slider, no matter you set the size in html or set the css width+height of the image, it wont resized because this plugin treats the image as background..and that css3 background resize that is the only way that save you :)
The documentation on that page says that you can pass size options to the constructor:
$('#coin-slider').coinslider({ width: 20, height: 20 });
If you have different sized images in the same slideshow and you want to change the slider's size dynamically, it might not be possible. Use same sized images or tweak the CSS so that you get black bars around smaller images or something to that effect.
Please post your complete HTML/JS source code, the image size shouldn't matter as long as they are the same height/width as the container of the slideshow. Chances are you are possibly calling the plugin in the wrong way in your JS.
Related
I previously posted a similar question but I don't think I illustrated it very clearly.
If I have a basic responsive image such as <img src="http://www.example.com/nicephoto.jpg">
Let's say that nicephoto.jpg is a large image (4000x5000px). I could load the whole image and let it scale or be cropped by the browser as per its own css or the css of its container - but ideally I would like to ask the server to send me a crop of the image that already fits exactly the size I need. EDIT: My question is not how to do the server side cropping - I've got that covered. My question is as follows:
How can I find out what the maximum width and height of the image is until some of the image will be either cut off or the image will be scaled down? In other words, what is the largest practical size that this image should be?
I could always load a massive grey 10000x10000px placeholder image and then use jQuery's .width() and .height() to figure out how much space it actually takes up, but that is hardly efficient or ideal. Is there some smarter way to do this?
Thanks!
EDIT: I do not have control over what methods will be employed to restrict the maximum height or width of a given image. This code will be running on different sites. One site may use css max-height on the image itself. Another may have a set height for a container. I don't know. Either way I need to figure out how big an image can be shown before it begins to be scaled or cropped.
Setting the late update aside for the moment:
It looks like you want to rescale an image on the server to the exact size needed by the client, rather than using CSS to resize the image in-browser. (Note that "crop" and "rescale" are different things; I'm assuming you actually mean "rescale".)
Here's one way to do what you're trying to do:
You do need, ultimately, to check the container's width and height on the client side -- the container size can't be known until page load, as it depends on the user's viewport size.
You can simplify communication with the server by using the image URL itself as a signal for the desired image to be generated. In this example I construct image URLs for placehold.it; you would instead substitute your own serverside script which would catch the url request, extract the desired width and height from the filename, and return the scaled image.
var reloadImage = function() {
var w = $('.container').width();
var h = $('.container').height();
$('.container img').attr("src", "http://placehold.it/"+w+"x"+h);
};
$('.container').mouseup(reloadImage);
.container {
width: 100px; height: 100px;
border: 2px solid;
resize: both; /* Note that not all browser support "resize"; it's just for demo here, not essential to the technique itself */
display: inline-block;
overflow:auto
}
.container img {width: 100%;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Resize this container:<br>
<div class="container"><img class="image" src="http://placehold.it/100x100"></div>
(Note that there is no need to create a "massive" placeholder image as you suggest -- a single pixel image, CSS scaled to 100% width and height, will do. As will no placeholder image at all, of course.)
Here's why you should not do what you're trying to do:
It will defeat browser-side cacheing of the image (since different images may be needed on each load), effectively increasing bandwidth use rather than saving it.
The time spent serverside re-scaling the image will cost more than would have been saved compared to downloading a larger-than-necessary image (or, alternatively, you'd have to cache many different-sized variations on the image serverside to be handed out as needed.)
Resizing the window after load either triggers new image generation (wasting bandwidth and server time) or leads to potentially undersized images. Upscaled too-small images look significantly worse than downscaled too-large ones.
Here's what you should do instead
Create three or four different sized images each somewhat larger than a typical use case (think desktop, tablet, mobile) and use #media queries to choose one based on the screen size. Use in-browser scaling to tweak that selected image to the exact desired size.
.foo {
background:url('foo_default.png') no-repeat 50% 50% fixed;
background-size: cover;
}
#media only screen and (max-width: 400px) {
.foo { background-image: url('foo_small.png'); }
}
#media only screen and (max-width: 800px) {
.foo { background-image: url('foo_med.png'); }
}
#media only screen and (min-width: 800px) {
.foo { background-image: url('foo_large.png'); }
}
But wait, there's an update
I do not have control over what methods will be employed to restrict the maximum height or width of a given image. This code will be running on different sites. One site may use css max-height on the image itself. Another may have a set height for a container. I don't know. Either way I need to figure out how big an image can be shown before it begins to be scaled or cropped.
This complicates things quite a bit more -- now you not only need to detect on the clientside the container width and height, but also need to parse any client CSS that may be affecting the image and altering its displayed size.
You could use window.getComputedStyle() on the image to get the list of applicable CSS rules; determining their effects would be... somewhat complicated. There is a partial implementation of this in an answer to this question, for example, though it only includes a tiny handful of the CSS rules that could affect an image or background image's size -- for a general-purpose solution you'd basically be doing the same work that the browser does to lays out the image in the first place.
It may go without saying that it'd be simpler to just have each site just request an appropriately-sized image in the first place.
You can do this by submitting an ajax request on document request, as well as on resize.
Then store this information to a session. Then return the scaled image via PHP ie:
<img src="image.php?img=someimg.jpg" />
You said you have server side covered so the javascript would look something like this:
$(function() {
function getvp() {
var vp = {
width: $(window).width(),
height: $(window).height()
}
return vp;
}
function submit_vp(vp) {
$.ajax({
method: "POST",
url: "some.php",
data: { vpwidth: vp.width, vpheight: vp.height }
})
.done(function(msg) {
//ajax is done
alert('width: ' + vp.width + ' height: ' + vp.height);
});
}
//Get initial viewport.
$(document).ready(function() {
submit_vp(getvp());
});
//Resubmit viewport on resize.
$(window).resize(function() {
submit_vp(getvp());
});
});
So if I am understanding correctly, you are looking to take an image, and have it resize based on the height and width of the window is that correct?
Check out the JSFiddle I created as an example using % for the height and width. As well as using the background-size: tag, you can select cover or content.
HTML:
<body>
<div class="box1">
<span></span>
</div>
</body>
CSS:
html, body {
height: 100%;
}
.box1 {
background: url(http://cdn.wallpapersafari.com/23/44/2mYJfU.jpg) no-repeat;
height: 100%;
width: 100%;
background-size: cover;
}
This may be a good refrence: CSS3 Background-size
If I'm understanding correctly, you want to be able to find the area for a picture, then scale it using server side (GD Library?) scripting, then display the image?
This is to save bandwidth?
I would probably just use a jquery call to find the width of the screen (or a container if you give the container padding), then with AJAX, send the width dimension to your back-end script.
The back-end script would then find out the aspect ratio of the image in question, apply the multiple of the w:h ratio to the width of the returned number and the ratio of the picture, then scale the image to that size and send it back.
html
<div class="container">
</div>
javascript
var width = $('.container').width();
$.post("back-end-script.php", {width:width}, function(data){
console.log(data); //Do something here with the returned picture
});
graphic backend script (back-end-script.php)
$width = $_POST['width'];
$img = thisimage.jpg;
//Not sure what script you're using, but this is where you'd find the
//img width and height
$img_w = /*image width*/
$img_h = /*image height*/
$img_r = $img_h / $img_w; //This will get a percentage
$new_img_w = $width;
$new_img_h = $new_img_w * $img_r; //This will make the height the right size
/* Then from here, convert your image to the right size and echo it back */
echo $new_img;
Some downfalls of doing it this way: If someone happens to resize their browser, you either have to run a delayed call to get a new image or you'll be stuck with the wrong sized image. Also, you might save more bandwidth if you just came up with 6-10 different image sizes for a responsive web:
<picture class="n-column-image-above__image tnt tnt-image">
<!--[if IE 9]>
<video style="display: none;">
<![endif]-->
<source media="(min-width: 1144px)" srcset="../img/img_retailer_icon_1077.png, ../img/img_retailer_icon_2154.png 2x"/>
<source media="(min-width: 768px)" srcset="../img/img_retailer_icon_707.png, ../img/img_retailer_icon_1414.png 2x"/>
<source media="(min-width: 375px)" srcset="../img/img_retailer_icon_340.png, ../img/img_retailer_icon_680.png 2x"/>
<source srcset="../img/img_retailer_icon_290.png, ../img/img_retailer_icon_580.png 2x"/>
<!--[if IE 9]>
</video>
<![endif]-->
<img src="../img/img_retailer_icon_1077.png" alt="REPLACE WITH IMAGE DESCRIPTION"/>
</picture>
I'm working with Bootstrap and I want to put some photos into my div and I want them to be all at the same size ("standardize").
If they're too big (and they will always be) I want to resize them to fit in my div and crop them if necessary.
For the moment her is what I do :
I've tried to change the style of the image in jQuery in a function:
• If the height is bigger than the width, I switch the style to max-width:100% and height auto.
• Inversement if the width is bigger than the height.
But I'm still new to jQuery and I am probably doing something wrong; can someone light my lantern please?
Here is my jQuery
$(document).ready(function(){
photoResize();
$(window).resize(function(){
photoResize();
});
});
function photoResize(){
image_w = $('img').width();
image_h = $('img').height();
if(image_h > image_w)
{
$('img').css("max-width","100%");
$('img').height("auto");
}
else if(image_w > image_h)
{
$('img').css("max-height","100%");
$('img').width("auto");
}
}
And here is a Fiddle for a better view : https://jsfiddle.net/Baldrani/DTcHh/9801/
Simplicity
I do this quite often in the CMS we use at work for galleries etc. The method I use involves a jQuery library called imgLiquid.js.
This will turn an inline image into a background image on the parent div. It's good because you can achieve your desired effect. It will crop the image (as it technically becomes a background image) and will apply background-size: cover; and background-position: center center; as inline styles.
You can find the plugin here
To initialize the plugin you just need:
$(".myele").imgLiquid();
Overheads
The plugin is very small (roughly around 5.106 KB) so you don't need to worry about adding weight to the page. It really it the most simple method I've come across (bar using thumbnails generated from the sever-side - see note at the bottom).
Cue CSS
I've tested this thoroughly and found it gives excellent results. You may then ask... what happens to my parent divs (as technically the plugin hides the img element - which therefore means the parent element doesn't know what height to make itself).
An easy method to make things work responsively, or not:
.myelement:before{
content: "";
padding-top: 50%;
display: block;
}
This CSS will give your heights back to the wrapping element. So if you wanted certain proportions you could use this math:
h / w * 100 = your percentage for the padding-top.
Working Example
Small note
Technically if I had the control I'd advise just using thumbnails.. I assume you're using some sort of system that could technically just render cut down versions of the images? The reason I use this method — and suggested it — is that I don't have control over the CMS and I'm assuming you just want to manage the code that's being produced as it's not stated.
if you want to make your images the same size then you dont need any javascript or calculations, why not just set it in css?
.someUniqueContainer img{
width:300px;
height:300px; // or what ever height you want
}
I'm guessing that in reality you actually want to crop all your images to a set width/height. if that's the case you'll need a serverside script for that.
where are the images coming from? it would be easyer to just edit them. if they are coming from a user then you would resize/crop on the server on file upload
There were several mistakes in your code.
Please look at this jsfiddle, please see https://jsfiddle.net/DTcHh/9796/
$(document).ready(function () {
photoResize();
$(window).resize(function () {
photoResize();
});
});
function photoResize() {
image_w = $('img').width();
image_h = $('img').height();
if (image_h > image_w) {
$('img').css("max-width", "100%");
$('img').height("auto");
} else if (image_w > image_h) {
$('img').css("max-height", "100%");
$('img').width("auto");
}
}
sth like this?, although this is pure css, not jquery included, might not be suit in your case..
body {
margin-top:20px
}
.col-xs-3 {
margin: 5px 0;
width: 500px;
height:120px
}
.col-xs-3 > div {
width: 100%;
height: 120px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
JsFiddle
I have a website that contains a side bar and sometimes an image of a very large size (about 800 pixels wide) but I scripted the code so that if a screen resolution is too small, the image shrinks and scales into the small space perfectly according to multiple browsers I tested the site on. I tested the site with the demo version of sortsite by powermapper at:
http://try.powermapper.com/Demo/
It then goes on to complain that "Omitting IMG WIDTH or HEIGHT attributes means page text jumps about as images load. Usability.gov 14:3"
I understand that and I try to include those attributes, the image does not scale correctly.
This is the CSS I use on the image itself to scale it if I had a monitor with a max screen width of 800 pixels:
#media screen and (max-width: 600px){#X IMG{width: 100%}}
I specify 600px because I reserved 200 pixels for the sidebar.
I don't think javascript will be an answer because during the page load, the image placeholder will jump to the new size, and if I placed the code near the beginning, it will delay the the rest of the page from loading somewhat.
I was also thinking using div tags and setting the background to the image, but the problem there is that users won't be able to save it and the rest of the images on my site are part of a CSS sprite sheet.
I also am looking for a solution that will work with as many web browsers as possible even if javascript is disabled.
Any ideas for an answer?
This rule, while correct, went out the window when responsive design came into being:
Omitting IMG WIDTH or HEIGHT attributes means page text jumps about
as images load. Usability.gov 14:3
If you're always going to be using a given aspect ratio, then you can set up your code as below. If you set your width and height attributes on your img tag and you set max-width: 100% (or similar) in your CSS, as people often do when developing responsive sites, then your text will still jump around when the image loads, because it's initial height will be what you specify in your markup, and then when the image loads, the browser will maintain the aspect ratio required for max-width: 100% to work and end up shrinking the height - so that doesn't really help you adhere to your usability rule either.
.img {
background-size: cover;
background: center no-repeat;
}
.ar {
height:0;
padding: 0 0 56.25% /* 16:9 aspect ratio */
}
<div class="img" style="background-image: url(https://placekitten.com/g/500/500);">
<div class="ar"></div>
</div>
Try setting the width and height and then just adjusting width and height with your media queries (rather than max-width and percent width). You shouldn't encounter any scaling problems then.
#media screen and (max-width: 600px){#X IMG{width: 100%}}
This means that IMG will have full width of it's first parent. That parent might not be X element. Are you sure you want that?
Example:
<div id='X'>
<div><div><div><div>
<img src=''>
</div></div></div></div>
</div>
If you are trying to fix x:y img ratio that put height:auto; after width:100%;
Calculate width or height and always use auto for other property to preserve image scaling.
I have a banner that uses an image as the background. The image's size is 670*303. Is there a way to stretch the banner(image) to full width of the screen.
Demo is at http://jsfiddle.net/zhshqzyc/xGQtF/2/
And also, there is extra color(background-color: #808000)
below the banner, how to remove it?
Thanks.
background-size: 100% should do the trick.
Here, http://jsfiddle.net/xGQtF/6/
If its a gradient or pattern that can be repeated you can use
background-repeat:repeat-x;
or just insert 'repeat-x' into your background css like
background:url(images/blah.jpeg) repeat-x;
That way you only need a small chunk of the image>smaller image sizes>quicker loading time.
to get rid of the color it is showing with the image you can use
background-color:transparent;
Also if, as I suspect, you wish to make the banner stretch seamlessly from one side to the other, be sure to set the body style with
padding:0px;
width:100%;
and use
margin:0px;
width:100%;
on the div containing the background.
Although it may stretch to the full width without setting the body padding to 0px, some browsers automatically give the body padding if it isn't set so it will counteract those that do.
If you're using an image that has curved edges and vertices etc this won't be right for you, you just want to stretch it (which personally I think wont look nice on 99% of detailed images) you can use:
background-size:100%;
Hope I've helped =)
I'm using jquery mobile, and I have a image that I would like to fit the screen from right to left, with no gaps. However, if I just put the image without doing anything to it like <img src="image.png />", it turns out with a small black border around it. This stays despite me setting width=100% in the css. How can I remove this border?
Adding some code:
<div data-role="content" style="background-color: #000000">
<div id="slogandiv">
<img src="slogan.jpg" id="slogan" width="100%" height="45%"/>
</div>
I just did this. It is because that the data-role = "content" has a automated padding of 15px.
I went into the .css file and removed this. search for ui-content. remember in the ui-content, listview, that it has -15 so change this to 0 aswell.
A CSS directive of width: 100% for your image simply means that the browser should display the image at its actual size (if it can), it won't stretch it to some other size. This may explain why you have a slight border around it, as the image doesn't quite scale to the full width of the viewport. You could try tinkering with the img tag's margin and padding settings, but I suspect the approach that will work best for you is to display the image a different way.
Have you tried manipulating the CSS of the containing element? Say you have a paragraph class called .container. You could do something like this:
.container {
background: url('image.png') no-repeat;
background-size: contain;
width: 480px;
height: 240px
}
… this will use your image as before, but this time the background-size attribute of contain will force it to fill the dimensions of the parent element (the height and width of which we have defined above).
background-size is new in CSS3 and therefore not uniformly-supported, but it's in WebKit and several other browsers. Read more: A List Apart: Supersize that Background, Please!