HTML5如何实现img标签中的图片根据屏幕大小显示相应部分的内容，并保证核心内容可见

实现以下效果：

有一张较大的图片，希望其在大屏幕上全屏显示，在小屏幕上显示中间核心部分的内容，根据屏幕大小自动调整显示效果。

实现方法：

样式部分
.container {
            overflow: hidden;
            width: 100%;
}

body部分
<div class="container">
    <img align="center" height="" src="{% static 'img/手机尺寸.png' %}" alt="">
</div>

js部分
<!-- 获取图片、窗口等基础数据 -->
img = document.querySelectorAll('img')[0];
wii = 700;    <!-- 图片中必须要显示的内容宽度 -->
wi = img.width;
ww = innerWidth;

<!-- 根据窗口与图片的大小关系调整图片尺寸，如果窗口够大，则放大图片尺寸，反之，则缩小图片尺寸 -->
if (ww < wii) {
    img.width = (wi * ww) / wii;
} else if (ww > wi) {
    img.width = ww;
} else {
}

<!-- 将图片中间部分内容居中显示 -->
wi = img.width;
marging_left = (ww - wi) / 2;
img.style.marginLeft = marging_left + "px";