html - 在表格交叉线上方的中心页面设置响应图像
问题描述
#logo-center {
max-width: 100%;
height: auto;
display: flex;
}
@media only screen and (min-width:991px) {
.logo-div {
-webkit-margin-start: -5%;
-webkit-margin-end: -15%;
-webkit-margin-before: -6%;
left: 40%;
top: 40%;
right: 40%;
position: absolute;
z-index: 100;
display: flex;
}
}
@media only screen and (max-width:990px) {
.logo-div {
-webkit-margin-start: -5%;
-webkit-margin-end: -15%;
-webkit-margin-before: -6%;
left: 40%;
top: 42%;
right: 42%;
position: absolute;
z-index: 100;
}
}
@media only screen and (max-width:700px) {
.logo-div {
left: 38%;
top: 43%;
right: 40%;
position: absolute;
z-index: 100;
}
}
@media only screen and (max-width:500px) {
.logo-div {
left: 35%;
top: 42%;
right: 40%;
position: absolute;
z-index: 100;
}
}
<div class="logo-div">
<div id="logo-center"><img style="border-radius: 7%;" src="https://www.crockerriverside.org/sites/main/files/main-images/camera_lense_0.jpeg"></div>
</div>
https://jsfiddle.net/8rmL5a7f/ 我需要在中心调整图像大小(以便在 mozilla/chrome/ie 中做出响应)并将其设置在页面中心以覆盖表格边框相交的十字。我的代码仅适用于 Firefox,但不适用于 chrome 或 IE。任何人都可以帮助我知道为什么?
解决方案
由于您没有设置图像的宽度并且您的图像非常大,因此它们会溢出 wrap div。
做这个:
#logo-center img {
width: 100%;
height: auto;
}
将height:auto
保持图像的比例。
在我的电脑(Windows)上的chrome之前:
在我的电脑(Windows)上的chrome之后:
在 div 中居中图像:
您将需要使.table-responsive.bordered.fill
and.logo-div
相同width
andheight
和 than:
#container {
position: relative;
}
#container .logo-div {
postion: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
请删除 上的right
属性.logo-div
。
基本上,top
和left
50% 将在中间对齐,但考虑到边界。考虑到元素的中心,要放在中间,您需要使用transform: translate
top -50% 和 left -50% 因为这将根据子元素 (.logo-div) 的大小而不是父元素 (#container) 或孩子的边界。
PS:您可以使用负边距或弹性框(justify-content 和 align-items on center)来做到这一点。但我通常将这个提出的解决方案与翻译一起使用。
推荐阅读
- angular - “AppComponent”类型上不存在属性“isSideBarOpen”
- java - HV000030:找不到约束“javax.validation.constraints.Pattern”验证类型“java.util.Date”的验证器
- javascript - 将活动类添加到幻灯片 javascript
- postgresql - 从另一个过程调用一个过程时:错误:过程参数“...”是一个输出参数,但对应的参数不可写
- arrays - jq:语法错误,使用 jq 输入意外的 ':'?
- dax - DAX 计算上个月的变化——但 Jan 不同
- javascript - 如何更改 matMenuTriggerFor 区域仅在箭头上触发
- embedded - 首次为 Tiva Launchpad TI TM4C1294XL MCU 设置 Keil 时出现问题
- c# - Prevent Combobox values repeating When select Items form another combobox
- javascript - “user.setStatus”不更新机器人的状态 Discord.JS