1

Within a surrounding div I want to center an image. This image should have a forced size but without stretching. So if the div container is 100px*100px and the image 200px*200px, 50px should be cropped on each side.

In this question you can read how to force the size. But I don't want the image to start on the bottom left but to center it. This is the question :)

This is how it is:

enter image description here

And this is how I want it to be:

enter image description here

Community
  • 1
  • 1
caw
  • 30,999
  • 61
  • 181
  • 291

3 Answers3

3

Give the image a negative left margin. In this example, margin-left:-50px.

Edit: Or if you don't know the width of the image, you can use the image as a background for the div.

<div style="margin:0 auto; width:100px; height:100px; border:2px solid black;
  background:url(yourimagehere) 50% 0 no-repeat">
</div>
Mr Lister
  • 45,515
  • 15
  • 108
  • 150
  • If I set a margin, I must know the width of the image. This is what I don't have, every image has an individual size. And the margin value must be calculated for every single image. – caw Jan 04 '12 at 13:24
  • 2
    Hm. Can't you use the image as a background for the div? With CSS, you can position the background anywhere you want within the div. Wait, I'll edit my answer. – Mr Lister Jan 04 '12 at 13:29
  • Oh, it's my fault. Your answer seems to be the perfect one now. But it doesn't work for me - which is only because I didn't give you all information. Your answer is perfect for the question. But I forgot to say that the image has also been resized in HTML: When the real width was 200 I included it in the HTML with – caw Jan 04 '12 at 13:55
  • But... if you resize it by using width="100" in your img tag, then you know what the screen width in pixels is, so you can use my first solution! Or am I missing yet something else again? – Mr Lister Jan 04 '12 at 14:11
  • No, YOU are not the one who is missing something. It's me again :D Actually, I don't know anything about the image, neither the width nor the height. I want the shorder edge (width or height) to fit into the div (resizing) and the larger edge to be centered with hidden overflow on both ends. – caw Jan 04 '12 at 14:21
  • 1
    Ah, well, that's easy. If you want to calculate (the smaller of the width and height), that's impossible in CSS. There you have it. So you'll need a bit of Javascript for the calculation, and if you're using javascript anyway, you can also find out what the screen width in pixels will be and set the margin accordingly. Or, alternatively, resize the image on the server-side before sending it, and then use the background-solution. – Mr Lister Jan 04 '12 at 14:29
0

This works even if the orientation of the container doesn't match the orientation of the image (portrait/landscape). The zoom(0.1) and min-width/height:1000% mean it works if the image size is up to 10x that of the target container, I guess you have to draw a line somewhere: (http://jsfiddle.net/FYnCG/). The animation bit is just a test, if you will, so you see how it scales when the height becomes the limiting factor.

<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>
Ulrich Schwarz
  • 7,598
  • 1
  • 36
  • 48
0

This might be what you need?

Madcowswe
  • 237
  • 1
  • 9
  • This property is really interesting, thank you! But I need to know the size of the image, right? – caw Jan 04 '12 at 13:29
  • @MarcoW. Try using %, as in [this](http://www.w3schools.com/cssref/playit.asp?filename=playcss_left&preval=-10%25) example – Madcowswe Jan 04 '12 at 17:33