CSS

.img {
    background:url(url_da_imagem);
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

You can track the result in this DEMO

Depending on the situation it is totally impracticable to use this method, however, I can ensure a good view of the image. I also advise the use for WEB applications, it is pleasant to use optimized images in mobile.

In my projects MVC C# I use Simple.ImageResizer , I use a controller where I pass as a parameter to URL of the image and it returns me the image readjusted according to the parameters that I also pass via query-string .

To install in your project, in the console type:

  

Install-Package Simple.ImageResizer

My controller stays this way

PhotoController

Add library reference

using Simple.ImageResizer.MvcExtensions;

And this will be your action

[OutputCache(VaryByParam = "*", Duration = 60 * 60 * 24 * 365)]
public ImageResult Index(string file, int w = 0, int h = 0)
{
    return new ImageResult(file, w, h);
}

I make a route to write friendly%% of the image.

RouteConfig

routes.MapRoute(
   name: "Photo",
   url: "Photo/{file}",
   defaults: new { controller = "Photo", action = "Index", file = ""}
);

Once you've done this you can put the images in this way.

<img src="Photo/caminho_da_foto.jpg?w=largura&h=altura" alt="" />

NOTE: In the projects we use a folder for images, then we have to map the path to not give problem, so just passing the file name through the URL, I will leave as an example my URL mapped with the path. >

ProjectHelper

private static string path = @"D:\caminho\das\fotos\";

public static string PhotosUploadFolder(string subfolder = "")
{
   return Util.path + subfolder;
}

And in% w / o% the return line would look like this:

return new ImageResult(ProjetoHelper.PhotosUploadFolder(file), w, h);

Both ways have solved my problem in several projects, I hope the idea applies to you.

What can be done is to create a CSS class for each element where the image is displayed, defining the same size for the same image.

Example:

CSS:

img1
{
    width: 250px;
    height: 100px;
}

img2
{
    width: 600px;
    height: 250px;   
}

HTML:

<img src="image/img_01.jpg" class="img1" />

<img src="image/img_01.jpg" class="img2" />

Note: Be aware of the dimensions to be defined in CSS because, depending on the dimension, you can distort the image. If the original image does not follow a pattern of width and height, this problem may occur. Maybe, using just one delimiter, example, just width, solve.

There are basically two approaches to working with different sizes of images on the site, for example: small, medium and large.

Resizing on the server

Your system should receive an image by setting a minimum size. So, use an image library to generate the three sizes according to your preferences.

Generally small and medium sizes have the image resized and cropped (borders) to fit the pre-set ratio and be well placed in listings. Large images can usually maintain their original size if they are displayed in a suitable location.

Resizing with CSS

You can display a large image in various formats while maintaining the aspect ratio. Example:

.original {
    width: 100%;
    height: auto;
}
.medium {
    width: 240px;
    height: auto;
}
.small {
    width: 120px;
    height: auto;
}

<p>Grande</p>
<img class="original" src="https://www.google.com.br/images/srpr/logo11w.png"/><p>Médio</p><imgclass="medium" src="https://www.google.com.br/images/srpr/logo11w.png"/><p>Pequeno</p><imgclass="small" src="https://www.google.com.br/images/srpr/logo11w.png"/>

Demo on JSFiddle

What's the difference?

Resizing on the server, generating multiple images, is usually more efficient. Although it takes a little longer and uses more space, it prevents absolutely all images from being transferred in full.

In this scenario, only the images the user really wants to see will be loaded from the server, leaving the access experience faster and saving network bandwidth.

Imagine 3G access by loading multiple images of 1600 x 1200 ! The user will almost certainly give up accessing the page at some point if there are more than a few images.

The CSS approach is good for small adjustments in size and may serve as a temporary but not recommended solution.

For you who are using .NET MVC, you could create in your Controller an ActionResult that receives the desired image, width, and height as parameters.

For example:

    public ActionResult ThumbNail(int largura, int altura)
    {
        WebImage webImagem = new WebImage(@"C:\imagem.png")
            .Resize(largura, altura, false, false);

        return File(webImagem.GetBytes(), "image/png");           
    }

and in the View

<img src="@Url.Action("Thumbnail", "SeuController", new { largura = 100, altura = 50 })" alt="thumbnail" />

Only adapt to get the image of the database, or a URL and etc.