有没有什么方法可以在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 =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 =placehold.it/600x100alt =这里有一些图片/>< / div>< div class =image-wrap> < img src =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 =placehold.it/600x100alt =这里有一些图片/>< / div>< div class =image-wrap> < img src =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 =placehold.it/600x100alt =这里有一些图片/>< / div>< div class =image-wrap> < img src =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="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="placehold.it/600x100" alt="some image here"/> </div> <div class="image-wrap"> <img src="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="placehold.it/600x100" alt="some image here"/> </div> <div class="image-wrap"> <img src="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="placehold.it/600x100" alt="some image here"/> </div> <div class="image-wrap"> <img src="placehold.it/200x400" alt="some image here"/> </div>
更多推荐
在设置背景位置的div中居中放置图像
发布评论