发表新帖
发表新帖

center image in div with overflow hidden

后端 未结
关注
12 1646
攒了一身酷
攒了一身酷 2020-12-08 18:59

I have an image of 400px and a div that is smaller (the width is not always 300px as in my example). I want to center the image in the div, and if there is an overflow, hide

相关标签:
12条回答
  • 谎友^
    2020-12-08 19:52

    Most recent solution:

    HTML

    <div class="parent">
    <img src="image.jpg" height="600" width="600"/>
</div>

    CSS

    .parent {
    width: 200px;
    height: 200px;
    overflow: hidden;
    /* Magic */
    display: flex;
    align-items: center; /* vertical */
    justify-content: center; /* horizontal */
}
    0 讨论(0)
  • 情歌与酒
    2020-12-08 19:53

    Found this nice solution by MELISSA PENTA (https://www.localwisdom.com/)

    HTML

    <div class="wrapper">
   <img src="image.jpg" />
</div>

    CSS

    div.wrapper {
  height:200px;
  line-height:200px;
  overflow:hidden;
  text-align:center;
  width:200px;
}
div.wrapper img {
  margin:-100%;
}

    Center any size image in div
    Used with rounded wrapper and different sized images.

    CSS

    .item-image {
    border: 5px solid #ccc;
    border-radius: 100%;
    margin: 0 auto;
    height: 200px;
    width: 200px;
    overflow: hidden;
    text-align: center;
}
.item-image img {
    height: 200px;    
    margin: -100%;
    max-width: none;
    width: auto;    
}

    Working example here codepen

    0 讨论(0)
  • 无人及你
    2020-12-08 19:58

    this seems to work on our site, using your ideas and a little math based upon the left edge of wrapper div. It seems redundant to go left 50% then take out 50% extra margin, but it seems to work.

    div.ImgWrapper {
    width: 160px;
    height: 160px
    overflow: hidden;
    text-align: center;
}

img.CropCenter {
    left: 50%;
    margin-left: -100%;
    position: relative;
    width: auto !important;
    height: 160px !important;
}

<div class="ImgWrapper">
<a href="#"><img class="CropCenter" src="img.png"></a>
</div>
    0 讨论(0)
  • 梦谈多话
    2020-12-08 20:00

    you the have to corp your image from sides to hide it try this

    3 Easy and Fast CSS Techniques for Faux Image Cropping | Css ...

    one of the demo for the first way on the site above

    try demo

    i will do some reading on it too

    0 讨论(0)
  • 春和景丽
    2020-12-08 20:01 
    <html>
<head>
<style type="text/css">
    .div-main{
        height:200px;
        width:200px;
        overflow: hidden;
        background:url(img.jpg) no-repeat center center
    }
</style>
</head>
<body>
    <div class="div-main">  
    </div>
</body>

    0 讨论(0)
  • 没有蜡笔的小新
    2020-12-08 20:04

    For me flex-box worked perfect to center the image.

    this is my html-code:

    <div class="img-wrapper">
  <img src="..." >
</div>

    and this i used for css: I wanted the Image same wide as the wrapper-element, but if the height is greater than the height of the wrapper-element it should be "cropped"/not displayed.

    .img-wrapper{
  width: 100%;
  height: 50%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; 
}
img {
  height: auto;
  width: 100%;
}
    0 讨论(0)
 看不清?
提交回复
热议问题