按宽度先缩小图像，然后按最大宽度按比例缩小图像

我有一幅图像，具有1200 x 200px。在这个图像的中心我有一个空间500×200px那是的主要内容全图像。在这张图片的每一面，我都有一个额外的内容。 注意：它在一个图像上。按宽度先缩小图像，然后按最大宽度按比例缩小图像

如果窗口宽度减小，那么首先它应该消耗图像的附加内容，但剪切它，保持图像高度不变。但是，如果我在主内容宽度的下方缩小窗口宽度（此时所有附加内容都被切掉），那么现在应该按比例调整图像大小，从而影响高度。

我的疑惑：

所以只能使用CSS做呢？
如果没有，有一些JS库可以做到这一点？
如果没有，我应该如何构建HTML，CSS和JS来实现它？

这是一个例子旗帜全宽：注意的是有一个主要内容和双方额外的内容。

此图片下面应有助于理解：我试图模拟窗口宽度调整大小，上1200像素，1000像素和500像素（即不影响高度还）然后通过350像素（即影响并按比例调整图像大小）。

来源

2016-02-29 David Rodrigues

是的，这可以用CSS只 – Enrico

#banner { 
 
    background-image: url("http://i.stack.imgur.com/csRha.png"); 
 
    width: 100%; 
 
    height: 200px; 
 
    background-repeat: no-repeat; 
 
    margin: 0 auto; 
 
    display: block; 
 
    border: 1px solid red; 
 
} 
 

 
@media all and (min-width: 1200px) { 
 
    #banner { 
 
    width: 1200px; 
 
    } 
 
} 
 

 
@media all and (max-width: 1200px) { 
 
    #banner { 
 
    background-position: 50% 0; 
 
    } 
 
} 
 

 
@media all and (max-width: 500px) { 
 
    #banner { 
 
    background-size: 240%; 
 
    } 
 
}

<div id="banner"></div>

来源

2016-02-29 23:04:18 Nate

所以只能使用CSS做呢？

是的，你只需要1 <div>。将图像视为背景图像，用background-position定位死点。然后使用媒体查询调整<div>的大小，将宽度设置为指定的断点。

来源

2016-02-29 21:59:58 Joseph

有意义做...我会尝试。 –

您可以使用一个简单的媒体查询是这样的：

@media max-width: 500px { 
    #your-image { 
    width: 100vw; 
    } 
}

来源

2016-02-29 22:03:14 cFreed

使用媒体查询添加图像/元素和改变CSS。至于你的问题使用百分比重新调整图像大小。我建议寻找渐进式增强和响应式设计。如果你不使用它，也查看视图端口。不要使用VW，在IE，EDGE（不支持VMAX）和Opera mini，ie8（根本不支持）方面还没有足够的支持。

来源

2016-02-29 22:24:20 PVL

按宽度先缩小图像，然后按最大宽度按比例缩小图像

回答

相关问题