有没有什么方法可以在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中居中放置图像
发布评论