Resize images but keep its ratio? - javascript

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

Related

What to change in order for this to shrink?

So I wanted to make a website which is pc related. I was into coding a few years ago, and I decided to pick it up again. I came across the following problem.
https://imgur.com/VjZaUEZ
If you look at this picture, you can see the part of the site which I made.
I want it to be responsive so that the text on the left side of the picture (explanation of CPU) is shrinking when I shrink my browser.
However, this is happening:
https://imgur.com/LBaHlOu
I want this text which is beneath the picture, to be next to it and shrinking. After a few hours trying things with display: and margin: etc, I decided to ask you guys.
Here are my codes (I know the codes aren't the best):
CSS: https://imgur.com/UOThxjv
HTML: https://imgur.com/DAhC6dx
if you need any clarification, please ask me.
You need to set divs around h4 dynamic width to something like 60%. Make div container for img and set its width to 40%. You should use parahraphs instead of heading-4 for text as well.
Modify HTML:
<div class="text">
<p>your text</p>
</div>
<div class="img-div"><img src="pc.png" alt="pc.png" /></div>
CSS:
.text {
width: 60%;
float: left;
}
.img-div {
float: right;
width: 40%;
}
.img-div img {
width: 100%;
height: 100%;
}
Responsive image map
To make the image map responsive you need to use a js script to manipulate coordinates on window resizing or use .SVG images for image map:
Check out this SO question.
JS image map resizer script
All the dimensions and margins in your CSS code are constant pixel lengths.
Instead, you should make them percentages of the window size. For example, you could make the width of a div tag or an image always be 20% of the screen size by putting in this line of CSS to its CSS class as shown below:
width: 20%;

How to scroll a large image inside a smaller div using mouse click and drag?

I want to place a large image inside a div and let the user scroll through the image using the mouse (click and drag to the desired direction). How can this effect be achieved?
CSS:
#image{
position: relative;
margin: 0 auto;
width: 600px;
height: 400px;
top: 300px;
background: url("http://www.treasurebeachhotel.com/images/property_assets/treasure/page-bg.jpg") no-repeat;
}
HTML:
<div id="image"></div>
EDIT:
I want to implement this myself in order to gain knowledge, 3rd party frameworks are last resort.
<html>
<body>
<div style="width:200;height:200;overflow:scroll;">
<img src="/home/james/Pictures/scone_ontology.png" />
</div>
</body>
</html>
Check out jQuery UI Draggable. The first example sounds like exactly what you are trying to do:
https://jqueryui.com/draggable/
So you just want 600w 400h div, with a "map" inside that you can scroll around and look at with the mouse? You're very close already.
Have a div with the size you want the end-product to take up. Make sure you set its css to overflow:scroll;. Then put your image inside this div. Your image can ofcourse also be the background-image of a div.
And that's it.
A cool trick would be to wrapp all this up in a div that is slightly smaller, with overflow:hidden. Just small enough to hide ugly scrollbars. But that might be bad usability.

Automatically setting height for a covered background image

On this website, I'm using the CSS3 Cover property of the Background rule to stretch an image behind the header.
Right now, I had to set the header element to have a min-height of 500px for it to work. However, this is not an optimal solution because when I resize the window, I expect the height to be less so the image shrinks proportionally. I'm thinking the solution might be in Javascript?
Here is the code:
<div style="background: url(http://altushealthsystem.com/dev/wp-content/uploads/home-banner.jpg) no-repeat 0 0 transparent;background-size: cover; min-height: 500px;"></div>
Link to the JS Fiddle
Is this possible?
You do not need javascript for that. You could specify the header height using percents. However that will work only if the parent has specified height.
In your example you should add
height: 100%;
for html and body elements (all ancestors of header), and for example:
height: 40%;
for you header element.
Instead of declaring a background for the header, you can add an image element with the following styling:
<header....>
<img src="http://altushealthsystem.com/dev/wp-content/uploads/home-banner.jpg" style="max-width:100%; height:auto;position: absolute;z-index: -999;">
<div class="container">
<div class="row top-row">
...
You should also take advantage of the #media tags to declare a certain width and height when the screen is of certain size.

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

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>

Categories

Resources