在设置背景位置的div中居中放置图像 [英] Center image inside a div like setting background position

问题描述

有没有什么方法可以在div中完全设置一个标签，无论div的宽度和高度是多少？换句话说，我想在div标签内设置一个像中心背景一样的图像位置。例如：

  .image-wrap {
 width：50vw; 
 height：720px; 
背景：url（'some-images.jpg'）无重复中心/自动100％; 
 
 $ / code> 

我想在上面的背景中使用自动宽度设置div内的图像和100％的高度，以便图像中的所有重要内容都将位于div的中心。



 < div class = 图像缠绕 > 
< img src =some-images.jpgalt =某图像在这里/> 
< / div> 
  

非常感谢！

解决方案您可以使用 transform：translate

  .image-wrap {position：relative; height：400px; text-align：center; border：1px dashed gray;}。image-wrap img {position：relative;顶部：50％; transform：translateY（-50％）;}  

< div class =image-wrap> < img src =http://placehold.it/200alt =某图片在这里/>< / div>

现在，如果您希望其表现为 background-size：auto 100％像这样

  .image-wrap {position：relative; height：200px; border：1px dashed grey; overflow：hidden;}。image-wrap img {position：relative;身高：100％;剩下：50％; transform：translateX（-50％）;}  

< div class =image-wrap> < img src =http://placehold.it/600x100alt =这里有一些图片/>< / div>< div class =image-wrap> < img src =http://placehold.it/200x400alt =某图片在这里/>< / div>

以下是一个表现为 background-size：cover 的版本

.image-wrap {position：relative; height：200px;溢出：隐藏; border：1px dashed grey; margin-bottom：10px;}。image-wrap img {position：relative;最小高度：100％;最小宽度：100％;顶部：50％;剩下：50％; transform：translate（-50％， - 50％）;}

< div class =image-wrap> < img src =http://placehold.it/600x100alt =这里有一些图片/>< / div>< div class =image-wrap> < img src =http://placehold.it/200x400alt =某图片在这里/>< / div>

此版本的行为如 background-size：包含没有

.image-wrap {position：relative; height：200px;溢出：隐藏; border：1px dashed grey; margin-bottom：10px;}。image-wrap img {position：relative;最大高度：100％;最大宽度：100％;顶部：50％;剩下：50％; transform：translate（-50％， - 50％）;}

< div class =image-wrap> < img src =http://placehold.it/600x100alt =这里有一些图片/>< / div>< div class =image-wrap> < img src =http://placehold.it/200x400alt =某图片在这里/>< / div>

Are there any ways that we can set a tag inside a div perfectly center no matter what is the width and height of that div? In other way, I want to set an image position inside a div tag like a center background. For example:

.image-wrap {
  width: 50vw;
  height: 720px;
  background: url('some-images.jpg') no-repeat center center / auto 100%;
}

I want to set an image inside a div like a background above with auto width and 100% height so that all the important content in an image will be in the center of the div.

<div class="image-wrap">
  <img src="some-images.jpg" alt="some image here"/>
</div>

Thank you very much!

解决方案

You could use transform: translate

.image-wrap {
  position: relative;
  height: 400px;
  text-align: center;
  border: 1px dashed gray;
}
.image-wrap img {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

<div class="image-wrap">
  <img src="http://placehold.it/200" alt="some image here"/>
</div>

Now, if you want it to behave as background-size: auto 100% does, do like this

.image-wrap {
  position: relative;
  height: 200px;
  border: 1px dashed gray;
  overflow: hidden;
}
.image-wrap img {
  position: relative;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
}

<div class="image-wrap">
  <img src="http://placehold.it/600x100" alt="some image here"/>
</div>

<div class="image-wrap">
  <img src="http://placehold.it/200x400" alt="some image here"/>
</div>

And here is a version behaving as background-size: cover does

.image-wrap {
  position: relative;
  height: 200px;
  overflow: hidden;
  border: 1px dashed gray;
  margin-bottom: 10px;
}
.image-wrap img {
  position: relative;
  min-height: 100%;
  min-width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

<div class="image-wrap">
  <img src="http://placehold.it/600x100" alt="some image here"/>
</div>

<div class="image-wrap">
  <img src="http://placehold.it/200x400" alt="some image here"/>
</div>

And this version behaving as background-size: contain does

.image-wrap {
  position: relative;
  height: 200px;
  overflow: hidden;
  border: 1px dashed gray;
  margin-bottom: 10px;
}
.image-wrap img {
  position: relative;
  max-height: 100%;
  max-width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

<div class="image-wrap">
  <img src="http://placehold.it/600x100" alt="some image here"/>
</div>

<div class="image-wrap">
  <img src="http://placehold.it/200x400" alt="some image here"/>
</div>

这篇关于在设置背景位置的div中居中放置图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！