I want to design a website.
I've got some images with different w*h.
For example, we have lots of pictures at 800*600 or 1024*768 or something else.
In our website we have some restricted frame like 270*160 or 512*900. We want to scale or resize the main pictures in restricted frame size.
How we can do this with Photoshop or any web design tools to resize images without stretching, destroying, or cropping the main images to properly fit into frame size, ?
In simple terms.. You Can't.
If you want to alter the overall aspect ratio of an image you must crop, stretch, squish, or mask (masking may be feasible on the web although it will result in essentially a crop). Those are your only options.
How many images are we talking about? If it's a handful, you can do this manually. Figure out your frame size, create a new blank file to that size, then open your source image. Reduce the size of your image so either the height matches your frame, or the width does (whichever one is smaller) then cut-and-paste that image into your blank 'frame' image. You can then move the image to figure out where you want it cropped, then save it out as your 'cropped frame' image. Repeat.
If we're talking hundreds of photos, you likely want to use software to automate this.
Alternatively, you could do this purely with CSS if the images aren't crazy-large in terms of download speed. Use the same logic as above where you have your div sized to the frame size you want, then the image as a background image. You'd need a little bit of JS to determine whether to scale the image based on it's width vs. height.
When you drag the image into photoshop right click the layer and you will find "convert to smart object".So that you picture wont get stretch or if you resize also it wont pixel.
