Question

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

我的宽度与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

我不知道我是否明白你想做什么我举一个我理解的例子

＆＃13;

#img-header-container{
  width: 100%;
}

#img-header{
  max-width:100%;
}

＆＃13;

<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>

＆＃13;

Answer 2

如果您希望图片保持其大小并且在父级尺寸更改时隐藏在所有角落，请对图像使用absolute定位，并使用left: 50%; top: 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。您可以将视口单元（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>

用css / js响应重叠图像

2 个答案: