Question

我正在构建一个包含复杂可折叠网格的响应式网站 - 它需要在较小的固定宽度div中显示部分大图像 - 这将根据媒体查询调整大小 - 溢出被隐藏以提供屏蔽效果。

我需要将图像定位到 -

左上方
中心顶部
左上方

当然，左上角是标准浏览器行为 - 但我需要最佳实践中心/顶部和左/顶部的跨设备/浏览器解决方案。

例如 - 以下代码结构 -

<div style="width:100px; height:50px; overflow:hidden;">
<img src="http://i.guim.co.uk/static/w-620/h--/q-95/sys-images/Guardian/Pix/pictures/2014/9/24/1411574454561/03085543-87de-47ab-a4eb-58e7e39d022e-620x372.jpeg" style="width:620px; height:320px;">
</div>

如何定位图像标签中心顶部或左上顶部

Answer 1

您可以将absolute positioning与top，bottom，left，right一起使用。

＆＃13;

div {
  width: 200px;
  height: 100px;
  overflow: hidden;
  position: relative;
  margin: 10px;
  display: inline-block;
}
img[data-position] {
  position: absolute;
  border: 1px dotted red;
}
img[data-position*=top]    { top: 0;    }
img[data-position*=bottom] { bottom: 0; }
img[data-position*=left]   { left: 0;   }
img[data-position*=right]  { right: 0;  }

＆＃13;

<div>
  <img src="http://i.stack.imgur.com/SyxjC.jpg" alt=""
       data-position="left top" width="620" height="320">
</div>
<div>
  <img src="http://i.stack.imgur.com/SyxjC.jpg"  alt=""
       data-position="right top" width="620" height="320">
</div>
<div>
  <img src="http://i.stack.imgur.com/SyxjC.jpg" alt=""
       data-position="left bottom" width="620" height="320">
</div>
<div>
  <img src="http://i.stack.imgur.com/SyxjC.jpg" alt=""
       data-position="right bottom" width="620" height="320">
</div>

＆＃13;

CSS：在带有溢出的div中定位IMG标记

1 个答案: