Javascript Detect Screen Resolution, change css, crop images accordingly - javascript

So I know how to change the css depending on the resolution via javascript.
How would one go about 'cropping' an image depending on the screen resolution?

Well you can get the screen details from window.screen - though personally I would recommend just finding out how big the current window is, the only reason not to is if you are going to resize the window and that is very frowned upon.
Once you know the sizes and how big you need to make your images, I find that images are cropped easiest by placing them inside a containing DIV with overflow: hidden; set. You can then size the containing DIV to the size required and set the top and left CSS attributes od the image to the negative values of the coordinate you want for the top-left visible corner.
<div class="crop-container" style="width: 200px; height: 200px; overflow: hidden;">
<img src="something-400x400.jpg" style="top: -100px; left: -100px;" width="400" height="400" alt="Something" />
</div>

Related

How can I responsively scale a single image file?

I have the following img tag, which sits inside a container with 30 pixels of horizontal padding. It is therefore designed to show a 640-pixel wide image if the screen is >=670 pixels wide, and otherwise a 320-pixel wide image:
<img srcset="TestImage320.png 320w, TestImage640.png 640w"
sizes="(max-width: 669px) 320px, 640px"
src="TestImage320.png">
However, the 640-pixel image is simply a manually scaled-up version of the 320-pixel image. Is it possible to achieve the same effect without creating (and requiring users to download) the 640-pixel image?
Essentially, my current approach chooses between src="TestImage320.png" and src="TestImage640.png" values depending on the available width. Instead, I want to keep src="TestImage320.png" and choose between style="width: 320px" and style="width: 640px". How can I achieve this (or something equivalent)?
If you try to scale up an image, it will look bad. You can scale down better and still keep some nice quality.
I would only include the 640px version. Throw a max-width: 640px; width: 100%; and watch it scale down perfectly.
Unless you are significantly worried about load time it is often best to use the largest image you need (in your case 640px) and then scale it down to 320px. Keep in mind with the prevalence of retina displays it is recommended that you double the resolution of your image so it still looks nice on those displays. But again it's a load time vs image quality question, though an image at 1280px shouldn't be a super huge file.
Use this style on your image it will scale and keep integrity according to width.
.imageClass{
width:100%
height:auto;
float:left;
}
If you need it to remain a certain height this will keep integrity according to height.
.imageClass{
width:auto;
height:100%;
float:left;
}
File HTML:
<div class="text-img">
<img src="text.jpg" alt="text" title="text" />
</div>
File CSS:
.text-img {width:100%;max-width:640px;overflow:hidden;}
.text-img img {min-height:100%;}

Resize images but keep its ratio?

First off, I see others have made similar posts and I will be reading them fully but I just wanted to put a fresh one up as you never know if someone has something better.
Explain my situation:
I want to make an image gallery where you click thumbnails and on click a larger version of the image appears in a div to their direct right. I understand how to do this, but I can already see a problem that will occur later on.
All my images are different sizes so I can see keeping there ratio correct being very difficult.
Lets say I have a div that's 500px wide and 400px high. What could I do to put any image inside this of any size that would scale down proportionally.
Just for information my images will be a lot bigger than the div to start with.
You could simply do this:
<div style="width: 500px; height: 400px">
<img style="height: 100%; width: 100%">
</div>​
or use one of the solutions provided here: automatically change the image size in the original ratio of the while change the size of that images parent element
<div style="width: 500px; height: 400px">
<img src="as.jpg"/>
<img src="as.jpg"/>
</div>​
css
img{
max-height: 20%;
max-width: 25%;
}

Show part of Image (sub-image in image strip) without squishing it?

I have an image on a webpage. It's a pretty big image, however. It's 6144*768. In actuality, it is a series of 6 images mushed together.
I read that it's better practice to load this one image instead of loading 6 images. I've found this to be true as well, when I used tables and CSS.
However, when I set this image as the source of an image element and then set the size of the image element to 1024*768, the image is squished. Ack!
How can I get this image to be not-squished by using only Javascript? Also, how could I move the background of the image?
[example: Imagine a really long strip of paper. Then, place a small cut-out rectangle of paper over that somewhere on the strip of paper, so that you can only see the part of the strip that is inside the rectangle. This is what I want to do]
Place the image inside a container element, and set the overflow to hidden using CSS.
Leave the image as it is and it won't be squished
HTML
<div id="imgContainer">
<img src="myImage.jpg" alt="" width="6144" height="768" />
</div>
CSS
#imgContainer
{
height: 1024px;
width: 768px;
overflow: hidden;
}
Then to move the image use negative values for the CSS style margin-left.
#imgContainer img
{
margin-left: -1024px;
}
You can do this with jQuery as follows
$("#imgContainer img").css("margin-left", "-1024px")
What OP is looking for is CSS Sprites (also see A List Apart or Smashingmag).
Don't scale your image with CSS; instead, put it in a wrapper div and do something like this in your CSS:
#myImageWrapper {
height: 1024;
width: 768;
overflow: hidden;
}

Is it possible to get an adjustable "view" of a static image in HTML?

I'm working on a web app where I have an image, and, for lack of a better word, a "view" of that image which is a box limiting what you can see to whatever part of the image is inside the box. The view can be adjusted by dragging the edges around, and the image is stays. However, I also want to be able to drag both the view and the image around together.
The best analogy I can think of is the Snipping Tool in Windows that you use to capture a portion of your screen.
I've tried a div with a background image, but that always resizes the image to fit the div. Right now I'm trying to have a div that contains an img, and setting the div to have overflow:hidden, but that makes the image stick to the upper left corner of the div.
Help? Thanks in advance!
Sounds like you want something that masks the image and only shows a segment.
Assuming a structure like.
<div class="img-mask">
<img>
</div>
You can set the styles of the mask to be overflow hidden with a width and a height (this creates the mask). Then position the image relatively, left and top till it's where you want it to be.
.img-mask {
overflow: hidden;
height: 200px;
width: 200px;
}
.img-mask img {
position: relative;
top: -25%;
left: -25%;
}
This should center the image to the mask.
I think there's a CSS property cut out for exactly this task: the clip attribute.
Here's the W3schools tutorial: http://www.w3schools.com/cssref/pr_pos_clip.asp. Click the Try it Yourself button to get a hands-on idea.
With this the CSS property applies only on the image and you do not need an additional masking div.

JavaScript/HTML: How do I display an IMG with a set dimension and if the image is wider or taller than that dimension, to crop/hide the overflow?

I have a bunch of images that are guaranteed to have:
minimum width = 200px
maximum width = 250px
minimum height = 150px
maximum height = 175px
What I want to do is display a consist 200px by 150px rectangle of the image while maintaining scale (no stretching or shrinking).
Which means, I might have some overflow.
How can I display the image so that it keeps porpotions to the original image size, yet displayed inside a 200x150 px window and hiding any overflow?
Wrap them in a container with the dimensions you want and overflow: hidden.
This trick is quite cool and doesnt matter the image size ok look... you can do something like this
<div style="width:Npx; height:Npx; overflow:hidden">
<img src="source.png" style="width:Npx;">
</div>
so how this work, the div will hold the imagen in a rectangle Xpx by Ypx you defined and will "crop" everything that its outside. Then you use the resize who have every browser you can assign a With a imagen and the browser will resize it for you. So if you put the same width that the div holder you will give the impresion that the image fit in that rectangle. This is the best option I can find without use server side code.
the next example is:
you can define again a rectangle and then assign a background, the big problem is the the imagen WILL not resize to fit the area.
<div style="width:Npx; height:Npx; background:url(yourimage.png) center"></div>
hope to help you... best
I made a quick demo (online here) of a way of solving it similar to nahum's second example. There are 3 images within the range of sizes you set. It doesn't resize or stretch the images and they will follow the alignment of the surrounding text.
Hope it helps,
Jedidiah
<span class="thumbnail" style="background-image:url(200_150.jpg);"></span>
<span class="thumbnail" style="background-image:url(220_160.jpg);"></span>
<span class="thumbnail" style="background-image:url(250_175.jpg);"></span>
span.thumbnail{
display:block; display:inline-block;
width:200px; height:150px;
background-position: center center;
background-repeat: no-repeat;
}
Use a span rather than a div because IE6+7 will only let you set display:inline-block on an element that is naturally inline.
The first display:block is a fallback for Firefox 2 which doesn't support inline-block.
If you're images are particularly large, or there are going to be lots of them (for example, a thumbnail browser). You may want to consider creating a pre-cropped copy of them image. This can be done using gd or imagemagick [0] - you can also find a number of wrapper libraries around these extensions that may make the task easier.
[0] http://php.net/manual/en/refs.utilspec.image.php
In theory, this is exactly what the clip property of CSS is for - but there's one, sometimes really painful, side effect to using it, though - the image needs to be absolutely positioned:
<html>
<head>
<style type="text/css">
.thumbnail {
width:200px;
height:150px;
}
.thumbnail img {
position:absolute;
clip:rect(0, 200px, 150px, 0);
}
</style>
</head>
<body>
<div class="thumbnail"><img src="http://uhaweb.hartford.edu/SDUNN/sandwich.jpg"></div>
<div class="thumbnail"><img src="http://uhaweb.hartford.edu/SDUNN/sandwich.jpg"></div>
<div class="thumbnail"><img src="http://uhaweb.hartford.edu/SDUNN/sandwich.jpg"></div>
<div class="thumbnail"><img src="http://uhaweb.hartford.edu/SDUNN/sandwich.jpg"></div>
</body>
</html>
The fact that this takes the images out of document flow is pretty nasty - the best you can do is put them inside a frame of the right dimensions (which means you may as well just use the overflow mask methods other people have suggested). Clip is a useful property in the right places, and a lot of people don't seem to know about it.
Just set a min-height:whatever and max-height:whatever and overflow:hidden on the blocks, then just place the images in the block, and that's it.

Categories

Resources