Изображение центра в div с переполнением скрыто

У меня есть изображение 400px и div, который меньше (ширина не всегда 300px, как в моем примере). Я хочу центрировать изображение в div, и если есть переполнение, скрыть его.

Примечание: я должен сохранить position:absolute на изображении. Я работаю с css-переходами, и если я использую position:relative, мое изображение немного дрожит (https://web.archive.org/web/20120528225923/http://ta6.maxplus.be:8888/),

jsfiddle http://jsfiddle.net/wjw83/1/

Ответы

Ответ 1

Вы должны сделать контейнер относительным и дать ему высоту, и все готово.

http://jsfiddle.net/jaap/wjw83/4/

.main {
  width: 300px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  height: 200px;
}

img.absolute {
  left: 50%;
  margin-left: -200px;
  position: absolute;
}
<div class="main">
  <img class="absolute" src="http://via.placeholder.com/400x200/A44/EED?text=Hello" alt="" />
</div>
<br />
<img src="http://via.placeholder.com/400x200/A44/EED?text=Hello" alt="" />

Ответ 2

Ни одно из вышеперечисленных решений не получилось хорошо для меня. Мне понадобился динамический размер изображения для размещения в круглом родительском контейнере с overflow:hidden

.circle-container {
    width:100px;
    height:100px;
    text-align:center;
    border-radius:50%;
    overflow:hidden;
}

.circle-img img {
  min-width:100px;
  max-width:none;
  height:100px;
  margin:0 -100%;
}

Рабочий пример: http://codepen.io/simgooder/pen/yNmXer

Ответ 3

Нашел это хорошее решение от MELISSA PENTA

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%;
}

Центр любого размера изображения в DIV
Используется с закругленной оберткой и изображениями разных размеров.

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;    
}

Рабочий пример здесь codepen

Ответ 4

<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>

Ответ 6

просто убедитесь, что вы используете изображение через css background, используйте положение изображения backgroud, например background: url (ваш путь к изображению) центр центра no-repeat; автоматически он будет выравнивать центр на экране.

Ответ 7

это, похоже, работает на нашем сайте, используя ваши идеи и небольшую математику, основанную на левом краю обертки div. Кажется излишним выйти налево на 50%, а затем извлечь 50% дополнительного поля, но, похоже, он работает.

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>

Ответ 8

Я пытаюсь выполнить ответ Jaap внутри этой страницы моего последнего сайта с одним отличием:.main {height:} был вместо auto, вместо фиксированного значения px. Являясь отзывчивым разработчиком, я ищу решение для синхронизации высоты изображения с левым элементом с плавающим текстом, но только в том случае, если высота текста становится больше, чем моя фактическая высота изображения. В этом случае изображение не следует перемасштабировать, а обрезать и центрировать, как описано в исходном вопросе здесь. Это можно сделать? Вы можете имитировать поведение, медленно уменьшая ширину браузера.

Ответ 9

Эта проблема - огромная боль в a.. но я, наконец, получил ее. Я видел много сложных решений. Это так просто, что я вижу это.

.parent {
  width:70px;
  height:70px;
}

.child {
  height:100%;
  width:10000px; /* Or some other impossibly large number */
  margin-left: -4965px; /* -1*((child width-parent width)/2) */
}

.child img {
  display:block; /* won't work without this */
  height:100%;
  margin:0 auto;
}

Ответ 10

Самое последнее решение:

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 */
}

Ответ 11

Для меня flex-box отлично работал для центрирования изображения.

это мой HTML-код:

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

и это я использовал для css: я хотел, чтобы изображение было таким же широким, как элемент-обертка, но если высота больше, чем высота элемента-обертки, оно должно быть "обрезано"/не отображаться.

.img-wrapper{
  width: 100%;
  height: 50%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; 
}
img {
  height: auto;
  width: 100%;
}