How can I responsively scale a single image file? - javascript

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%;}

Related

Overriding img height for responsive design

I have a slight problem in trying to make my website responsive as well as laying out images nicely with packery.
<div id="content"> // <- width of this determined through javascript
<div class="imagecontainer">
<img src="picture" width=500 height=700>
</div>
</div>
css:
.imagecontainer{
max-width:100%;
}
img{
width:100%;
}
I've set the max-width at 100% for my imagecontainers so that they're never larger than the main content div. With the above code, however, the images inside get squashed horizontally as the img's width, but not height is overruled by the imagecontainer's max-width. The simple solution to this problem is of course to remove the height value from the img, but I've just painstakingly ADDED it so that packery won't make a mockery of my layout when it's loading by placing posts on top of each other. Adding height:auto to the img css also ruins the layout (when it's loading, just to be clear).
The best solution I've come up with is to remove the height attribute from the image once it's loaded, but I was wondering if there's maybe an easier css-only solution, or a smarter way of doing it with js?

how to scale image according to image - css

I am soo bad at css. I have a div in which multiple images can be put. this div is a slide.
<div id="slides">
<img src="imagename.jpg"/>
</div>
some images are e.g. 100x300 but some are 300x100. how can I scale those images according to their own dimensions so that they show up as in original form?
my live example with this bug is in here:
http://wohne-wo-du-willst.de/angebot/Wohnung/ist-frei-in-Dachau/22/
as you slide, the 3rd slide image doesnot show up in its full form..
A big problem you have here is that your images aren't 100x300px or 300x100px, they're instead 1920x2560px or 2560x1920px - much, much larger. They're also all around 1MB in size, which in reality is far too large for images like this. Before doing anything you should resize these images yourself to make them their desired size and ultimately reduce their file size as well.
After that, simply remove the max-width and max-height properties from your #slides img selector, then modify width and height to:
#slides img {
...
height: initial;
width: initial !important;
}
The initial value sets the image size to its initial size; that means if your image is 100x300, that is also its initial size. Using this with the images you currently have will set them to 1920x2560 or 2560x1920.
I've unfortunately had to use !important here as the slide plugin will try to force your images to 100% width.
<style>
img
{
height:100%;
width:100%;
}
</style>
<div id="slides">
<img src="imagename.jpg"/>
</div>

Centering an image on screen using CSS - Random Screen/Image dimensions

I have to create a web page that for the purposes of this question is a single image centered both vertically and horizontally in the center of the screen. It has the following requirements:
The screen size of the client is unknown (mobile)
The image is user-defined and therefore is of unknown dimensions
The image must be perfectly centered both vertically and horizontally on all devices
The image centering must persist through a screen rotation (i.e. from portrait to landscape)
Being a bit of a CSS newb, I went and created this the only way I knew how, using javascript to position the content:
http://jsfiddle.net/error454/8YL9a/
I'm looking for a solution that functions identically to my solution but uses CSS instead of hard equations.
display:-webkit-box;
-webkit-box-orient:horizontal;
-webkit-box-pack:center;
-webkit-box-align:center;
display:-moz-box;
-moz-box-orient:horizontal;
-moz-box-pack:center;
-moz-box-align:center;
CSS3 property, bad support : webkit, mozilla. Only way to do it with clean markup and CSS without JS.
edit 1 : http://jsfiddle.net/t8qtn/6/
edit 2 : for future proofing, the prefixless version is
display:box;
box-orient:horizontal;
box-pack:center;
box-align:center;
This is a nice article on centering: http://www.w3.org/Style/Examples/007/center.en.html
It should be something like:
.vcenter { display:table-cell; vertical-align:middle; }
.hcenter { display:block; margin-left:auto; margin-right:auto; }
And then apply both classes to your image:
<img class="vcenter hcenter" src="..."/>
Update: you could simply use a table like here http://www.sorinvasilescu.ro/

Javascript Detect Screen Resolution, change css, crop images accordingly

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>

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