首页 文章

将一个未知大小的大图像置于较小的div内，并隐藏溢出

提问于
浏览 次
64

我想将一个img置于div without javascript 和 without background-images 中 .

这是一些示例代码

<div> 
    <img src="/happy_cat.png"/> 
</div>

  • 我不知道img的大小，它应该能够超过父级的宽度

  • 我不知道父div的宽度（它是100％）

  • 父div具有固定的高度

  • 图像大于父图像，父图像溢出：隐藏

  • 只需要支持现代浏览器

期望的结果 . （忽略不透明等，只需注意定位） .

enter image description here

我知道这可以通过背景图像轻松完成，但这对我来说不是一个选择 . 我也可以使用javascript，但它似乎是一个非常沉重的方式来实现这一点 .

谢谢！

插口

html css css3

6 回答

  • 2

    那这个呢：

    .img {
   position: absolute;
   left: 50%;
   top: 50%;
   -webkit-transform: translateY(-50%) translateX(-50%);
}

    这假设父div相对定位 . 我认为如果你想要.img相对定位而不是绝对定位，这是有效的 . 只需删除 position: absolute 并将顶部/左侧更改为 margin-top 和 margin-left .

    您可能希望使用 transform ， -moz-transform 等添加浏览器支持 .

    回复于
  • 2

    老问题，新答案：

    当图像大于包装div时，text-align：center或margin：auto不起作用 . 但是如果图像较小，那么具有绝对定位或负左边距的解决方案将产生奇怪的效果 .

    因此，当实际上事先不知道图像大小时（例如在CSM上）并且它可能比包装div更大或更小，有一个优雅的CSS3解决方案可用于所有目的：

    div {
    display: flex;
    justify-content: center;
    height: 400px; /* or other desired height */
    overflow: hidden;
}
img {
    flex: none; /* keep aspect ratio */
}

    请注意，根据样式表中的其他规则，您可能需要将宽度：auto和/或max-width：none附加到img .

    回复于
  • 1

    这总是有点棘手，有很多解决方案 . 我找到了最好的解决方案如下 . 它以纵向和横向为中心 .

    CSS

    #container {
    height: 400px;
    width: 400px;
}
.image {
    background: white;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.left {
    width: 100px;
    height: 100%;
    z-index: 2;
    background: white;
    top: 0px;
    position: absolute;
    left: 0px;
}
.right {
    width: 100px;
    height: 100%;
    z-index: 2;
    position: absolute;
    background: white;
    top: 0px;
    right: 0px;
}
.image img {
    margin: auto;
    display: block;
}

    HTML

    <div id="container">
<div class="image">
    <div class="left"></div>
    <div class="right"></div>
    <img width="500" src="https://www.google.com.au/images/srpr/logo11w.png" />
</div>

    See fiddle

    技术略有不同：Fiddle

    回复于
  • 2

    谢谢大家的帮助 . 我只会考虑在CSS中无法实现这一点 .

    我将转向jQuery解决方案 . 这是一些感兴趣的[伪]代码 .

    我打算放弃CSS解决方案，但看起来可以做到（见接受的答案） . 这是我将要使用的JS解决方案 .

    var $img = $('img'),
    w = $img.width();

$img.css({marginLeft: -w});

    和随之而来的CSS

    img{
  position:absolute;
  left:50%;
}
    回复于
  • 42

    我知道这是旧的，但我也提出了一个非常类似于上面的纯css解决方案 .

    .parent {
    float: left;
    position: relative;
    width: 14.529%; // Adjust to your needs
}

.parent img {
    margin: auto;
    max-width: none; // this was needed for my particular instance
    position: absolute;
    top: 11px; right: -50%; bottom: 0; left: -50%;
    z-index: 0;
}
    回复于
  • 85

    只需初始化图像的位置，如下所示 .

    HTML：

    <div> 
    <img id="img" src="/happy_cat.png"/> 
</div>

    CSS：

    #img {
    left: 0;
    right: 0;
}

    或者看 margin: auto;

    这是用于水平对齐 . 为了使它垂直对齐，你可以 display: table-cell; 到 <div> 然后 vertical-align: middle; ，但这不是一个好习惯，因为你的 <div> 不是一个表 .

    回复于

相关问题