Центр изображения с принудительным размером без растяжения - PullRequest
Новая
       13

Центр изображения с принудительным размером без растяжения

1 голос
/ 04 января 2012

Внутри окружения я хочу центрировать изображение.Это изображение должно иметь принудительный размер, но без растяжения.Таким образом, если контейнер div имеет размер 100px * 100px и изображение 200px * 200px, 50px следует обрезать с каждой стороны.

В этот вопрос вы можете прочитать, как принудительно задать размер.Но я не хочу, чтобы изображение начиналось внизу слева, а центрировало его.Это вопрос:)

Вот как это:

enter image description here

И вот как я хочу этобыть:

enter image description here

Ответы [ 3 ]

3 голосов
/ 04 января 2012

Дайте изображению отрицательное левое поле. В этом примере margin-left:-50px.

Редактировать: Или, если вы не знаете ширину изображения, вы можете использовать изображение в качестве фона для div. 

<div style="margin:0 auto; width:100px; height:100px; border:2px solid black;
  background:url(yourimagehere) 50% 0 no-repeat">
</div>
0 голосов
/ 25 мая 2014

Это работает, даже если ориентация контейнера не соответствует ориентации изображения (книжная / альбомная).zoom(0.1) и min-width/height:1000% означают, что это работает, если размер изображения до 10 раз превышает размер целевого контейнера, я думаю, вам нужно где-то нарисовать линию: (http://jsfiddle.net/FYnCG/). Бит анимации - это просто тест,Если хотите, вы увидите, как она масштабируется, когда высота становится ограничивающим фактором. 

<DOCTYPE html>
<html>
<head>
<style>
.container {
  width: 100px;
  height: 30px;
  border: 1px solid black;
  overflow:hidden;
  position:relative;
  transititon: width 5s, height 8s;
}
.container img {
  position: absolute;
  left:-10000%; right: -10000%; 
  top: -10000%; bottom: -10000%;
  margin: auto auto;
  min-width: 1000%;
  min-height: 1000%;
  -webkit-transform:scale(0.1);
  transform: scale(0.1);
}
.container:hover {
  width: 800px;
  height: 800px;
  transition: width 5s, height 8s;
}
</style>
</head>
<body>
  <div class="container">
    <img 
       src="https://www.google.de/logos/doodles/2014/european-parliament-election-2014-day-4-5483168891142144-hp.jpg" 
       />
    <!-- 366x200 -->
  </div>
</body>
</html>
0 голосов
/ 04 января 2012

Это может быть то, что вам нужно?

...