将一个图像置于一个太小的div中？

所以我在我的身体一个div这是一个百分比宽度，以及内部与内嵌样式股利如下：将一个图像置于一个太小的div中？

text-align: center; margin-left: -15px; margin-right: -15px; overflow: hidden;

正如你所看到的，我有text-align: center;上，这会，如果图像对于div足够小，请将图像居中。但是，在我的1280x800屏幕上，百分比宽度div绝对不会很大。

消极的利润率是克服它的父母div一些填充。 overflow:hidden使事情看起来像我想要的，而不是凌乱。所以，它的工作方式就像我想要的那样，比如onenaught.com的标题图片。在浏览器变得更宽的时候，它会变得更加明显，但不会从双方扩展，因为它不是以中心为中心。

所以，我想知道是否有任何方式来居中图像。知道吗？

编辑：第here页。

来源

2009-08-27 Nathaniel

一个选项是将图像绝对定位为left: 50%，然后在图像上使用等于图像宽度一半的负余量。当然，这需要包含div将其定位设置为相对或绝对，以便为要绝对定位的图像提供适当的容器类型。

另一种选择（可能更好）不是使用图像标记，而是将图像设置为父div的背景，并使用background positioning CSS attributes来居中它。这不仅确保它在不强制绝对定位的情况下居中，而且还自动裁剪溢出，因此溢出属性不是必需的。

来源

2009-08-27 22:53:57 Amber

标记答案，因为它主要涵盖两个提交的答案。无法使用背景方法进行工作，并且没有完成绝对定位。谢谢，不过。 – Nathaniel 2009-09-18 04:20:03

+1，因为第一个解决方案也适用于非图像。这个问题确实指定了图像，但我来到这里期待将一个“div”放在一个太小的容器中。谢谢。 – Johno 2012-06-07 11:07:21

链接似乎破碎发现它在这里http://www.w3schools.com/cssref/pr_background-position.asp现在，解决方案是“背景位置：中心;”谢谢 – John 2015-08-13 08:08:45

考虑使用图像作为背景;）

使用background-position来得到你想要的。

你可能需要一个JavaScript的解决方案，实现一致的跨浏览器的图像上设置margin-left和margin-right到-100%结果

来源

2009-08-27 22:54:57

如果图像纯粹是装饰的，我会鼓励这个解决方案。 “背景 - 位置：50％50％”在任何地方都能正常工作。 – 2016-12-05 09:16:56

实际上，你可以做到这一点。

~~这里是一个jsFiddle演示这一点。~~（使用一个下面代替，它的更好）

它是一种更好的想法的图像上设定的margin-left和margin-right到更大的负数，例如-9999%，与-100%值时，图像开始为包含元件的div的变得比div的宽度的3倍以下宽尽快离开中心位置：

margin-left: -100% + the div's width: 100% + margin-right: -100% = 3x div width

可以检查在这个jsFiddle与前一个之间的行为差异是通过将溢出切换为可见并将结果窗口的大小调整为小于div的宽度的300%。

报价@MaxOriola上支持的浏览器的范围（从评论）：

我重新测试第二小提琴......在火狐，Chrome，Safari浏览器（最后版本）和资源管理器8，9， 10.所有这些工作都很好。

注：图片元件具有要被显示inline或inline-block并用text-align: center水平居中（包装元素上）。

// ALL of the JS below is for demonstration purposes only 
 

 
$(document).ready(function() { 
 
    $('a').click(function() { 
 
    $('body > div').toggleClass('overflow'); 
 
    }); 
 
})

img { 
 
    margin: 0 -9999% 0 -9999%; 
 
} 
 

 

 
/* ALL of the CSS below is for demonstration purposes only */ 
 

 
body { 
 
    text-align: center; 
 
    font-family: verdana; 
 
    font-size: 10pt; 
 
    line-height: 20pt; 
 
} 
 

 
body>div { 
 
    margin: 0px auto; 
 
    width: 40%; 
 
    background-color: lightblue; 
 
    overflow: hidden; 
 
} 
 

 
img { 
 
    vertical-align: top; 
 
} 
 

 
.overflow { 
 
    overflow: visible; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div>40% wide div [<a href="#">toggle overflow</a>] 
 
    <div> 
 
    <img src="http://lorempixel.com/400/200" /> 
 
    </div> 
 
    400px wide image 
 
</div>

来源

2013-05-20 04:55:38

+10这完全工作并保存了底层HTML的重写。 – 2014-06-20 17:33:36

有人知道支持的浏览器范围吗？ – jmarceli 2015-08-06 09:09:49

我希望有一种书签答案的方法。这是那些没有记录的稀有宝石之一，可以节省数小时的工作时间。 P.S.海事组织这应该是一个被接受的答案。 – MadOgre 2015-12-22 06:35:56

我已经找到另一种解决方案

<style type="text/css"> 
    .container { 
     width:600px; //set how much you want 
     overflow: hidden; 
     position: relative; 
    } 
    .containerSecond{ 
     position: absolute; 
     top:0px; 
     left:-100%; 
     width:300%; 
    } 
    .image{ 
     width: 800px; //your image size 
    }   
</style>

，并在身体

<div class="container"> 
    <div class="containerSecond"> 
     <image src="..." class="" /> 
    </div> 
</div>

这将围绕你的图像时，您的容器是更大或更小。在这种情况下，您的图片应该大于容器的300％而不是居中，但在这种情况下，您可以使用容器的第二个更大，并且它将工作

来源

2013-08-03 08:51:57 Ruben

使用css transform，对于容器内的图像使用overflow: hidden和一组宽度：

img { 
    position: relative; 
    left: 50%; 
    transform: translateX(-50%); 
    display: block; /* optional */ 
}

jsFiddle here（我借Mathijs Flietstra的的jsfiddle的一部分，所以感谢）。

来源

2016-04-04 08:36:30

您还应该包含'-webkit-transform' css属性以使其可以在iOS上使用。 – 2016-04-10 17:48:03

完美，也适用于视频。 – 2016-10-31 07:37:00

将一个图像置于一个太小的div中？

回答

相关问题