Czy jest to możliwe w CSS, aby osiągnąć następujące informacje:

enter image description here

Dzięki następującym jest HTML i CSS:

<div class="preview">
  <img src="/big-ass-image.png" width="150" height="500" border="0"/>
</div>

.preview {
  width: 200px;
  height: 100px;
}

Dlatego tak, że tylko część obrazu w DIV (szare pudełko w makiecie powyżej) pojawia się, a środkowa część obrazu jest wyświetlana z odpoczynkiem odcięta.

2
Hopstream 16 luty 2017, 19:19

2 odpowiedzi

Najlepsza odpowiedź

Mam nadzieję, że to pomoże ci z zapytaniem. Jeśli masz jakieś pytania, upuść komentarz i postaram się zmienić mój post, by pasował do Twoich potrzeb.

.preview {
  background: red;
  width: 200px;
  max-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.preview:hover {
  overflow: visible;
}

.preview img {
  width: 150px;
}
<div class="preview">
  <img src="http://placehold.it/150x150">
</div>
2
Luke Clynes 16 luty 2017, 16:34

Jednym rozwiązaniem byłoby użycie position: absolute na obrazie i środku go za pomocą transform: translate i ustaw overflow: hidden na rodzica.

.preview {
  width: 200px;
  height: 50px;
  border: 1px solid black;
  position: relative;
  overflow: hidden;
  margin: 50px;
}
img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}
.preview:hover {
  overflow: visible
}
<div class="preview">
  <img src="http://placehold.it/150x150">
</div>
2
Nenad Vracar 16 luty 2017, 16:32