如何通过动态更改浏览器大小来使图像自动调整大小？

Question

I have a chart that I am creating on the backend and then passing to the front end as an image. I need this image to shrink/grow as I change the window size of my browser but cannot get it to adapt to the screen size. Anyone know how I can get it to auto resize with the changing size of the browser window?

equip.cshtml:

<img src="@Url.Action("DrawChart")" alt="Drawing chart with HTML Helper" />

equip.cs

public ActionResult DrawChart()
    {
        var chart = new Chart(width: 450, height: 300)
            .AddSeries(
                        chartType: "Doughnut",
                        xValue: new[] { "10 Records", "20 Records", "30 Records", "40 Records" },
                        yValues: new[] { "50", "60", "78", "80" })
                        .GetBytes("png");

        return File(chart, "image/bytes");
    }

Answer 1

Add this to the top of the view or the template.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Depending on your Css, this should work. Take a look at bootstrap examples and this should give you a better idea. Fixed properties for example will not help you.

Lots of examples of responsive designs out there.

Answer 2

i think we need a responsive design here...

i just gave an answer on resize image on changing the screen size

check out Making background images responsive - fullpage.js