javascript - 响应重叠图像与 css/js

Question

我在全 Angular div 中有一张图像与 div 重叠，因此当浏览器调整大小时，会显示/隐藏更多图像，但图像本身不会调整大小。我让它在宽度上有效，但我怎样才能在高度上达到同样的效果？

这是我的测试: https://jsfiddle.net/g8h8umt3/

我得到了使用 css 的宽度:

#img-header{
    margin-left: 50%;
    transform: translateX(-50%);
}

编辑:

这是一张关于它应该如何工作的图片: Image

背景中的图像应保持其大小，父 div 应根据屏幕大小变小/变大。我得到了宽度的行为，但我不知道如何为图像的高度做这件事。

我也试过添加

#img-header{
    margin-top: 50%;
    margin-left: 50%;
    transform: translate(-50%,-50%);
}

但这似乎不起作用

Answer 1

如果您希望图像保持其大小并且随着父级尺寸的变化隐藏在所有 Angular 落，请对图像使用 absolute 定位，并结合使用 left: 50 %;顶部:50%； transform: translate(-50%,-50%) 将图像放在父级的中心，父级将缩放图像的所有边。

$(document).ready(function () {
	
	$('#img-header-container').height($( window ).width()/3);
	
    $( window ).resize(function() {
		onResized();
	});
});

function onResized(){
	$('#img-header-container').height($( window ).width()/3);
}

#img-header-container{
  width: 100%;
	overflow: hidden;
  position: relative;
}

#img-header{
  position: absolute;
	left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="min-height:50px">Conent Before</div>
<div id="img-header-container">
  <img src="https://clsimplex.com/images/releases/headers/quality-code.jpg" id="img-header"/>
</div>
<div style="min-height:50px">Conent After</div>

不管怎样，您不必使用 jquery 使容器成为窗口高度的 1/3。为此，您可以将视口(viewport)单位 (vh) 与 calc() 结合使用。

#img-header-container {
  height: calc(100vh / 3);
  overflow: hidden;
  position: relative;
}

#img-header {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<div style="min-height:50px">Conent Before</div>
<div id="img-header-container">
  <img src="https://clsimplex.com/images/releases/headers/quality-code.jpg" id="img-header" />
</div>
<div style="min-height:50px">Conent After</div>

在 FWIW v2.0 中，您可以使用背景图片来执行此操作，这样 img 就不会阻止页面加载，而且标记/css 也更少。

#img-header-container {
  height: calc(100vh / 3);
  background: url('https://clsimplex.com/images/releases/headers/quality-code.jpg') center center no-repeat;
}

<div style="min-height:50px">Conent Before</div>
<div id="img-header-container">
</div>
<div style="min-height:50px">Conent After</div>