How to wrap a container in an image - html

Question

So I have a class, let's call cont that will hold a lot of things, including an image.
Now I want to style the image. We can style an image inside a div with .cont using:
.cont>img {
...
}
However, in my cont div, I want another box to occupy 150px*150px, where the image is 'inside'. To clarify, I want to have a 150px*150px box, that holds an image that may be smaller:
[ ]
[ [ ] ]
[ [img] ]
[ [ ] ]
[ ]
Basically, in common css, this can be done like so:
.cont-image {
width:150px;
height:150px;
}
But that has the disadvantage of having to add the cont-image class to every image.
Is this possible to be inherited and styled automagically™? Somehow Like:
.cont>img {
width:150px;
height:150px;
}
(The above obviously doesn't work, because it stretches the image to the dimension, instead of having a 'wrapper' container.
Basically, I want to have an image have a preset size that it gets dropped into. This can be done like so:
<div style="width:150px;height:150px">
<img src=""></img>
</div>
So that I have a div that is 150*150 and the image with variable size is inside of it. However, I'm looking to do this through styling the image itself only (no outside div):
<img style="???" src=""></img>

Answer 1

Have you tried changing to max-width/height?
.cont>img {
max-width:150px;
max-height:150px;
}
There will be no stretching for image.

Answer 2

Are you looking for something like this: http://jsfiddle.net/abhitalks/pULZA/1/ ?
Using the same markup:
<div class="cont">
<img src="http://lorempixel.com/50/50" />
</div>
Try changing the size of the image in the fiddle. Try making it http://lorempixel.com/350/350. Hope that suits your purpose of capping the image size in the inner container.
Now for the CSS:
Using :after pseudo-class to generate a faux-container. It is actually not a container, but looks like one. This will help you to not change your existing markup.
.cont {
border: 1px solid gray;
width: 250px; height: 250px;
line-height: 250px;
position: relative;
text-align: center;
}
.cont > img {
border: 1px solid black;
display: inline-block;
max-width: 150px; max-height: 150px;
vertical-align: middle;
text-align: center;
}
.cont:after {
content: "";
display: block;
position: absolute;
top: 50px; left: 50px;
width: 150px; height: 150px;
border: 1px solid red;
background-color: #ddd;
z-index: -10;
}
Making the z-index negative, makes it go behind the image and thus appearing as if a container.
Otherwise, the only option you have is to change the markup to have nested divs.
Update:
Check this: http://jsfiddle.net/abhitalks/pULZA/2/
As you have said that you want the container to be fixed at 150px, you can use the half of that figure (75px) to calc and position the :after content accordingly. Thus even if the .cont dimensions change, the image and its frame will always remain in center.
Using CSS calc:
.cont:after {
...
/* to calculate center,
we halve the width to 75px and subtract it from 50% of parent
*/
top: calc(50% - 75px); left: calc(50% - 75px);
width: 150px; height: 150px;
...
}

Answer 3

HTML:
<div class="cont">
<div>
<img src="http://www.famfamfam.com/lab/icons/silk/icons/application_form.png" />
</div>
</div>
CSS:
.cont {
width: 150px;
height: 150px;
background-color: green;
padding: 25px;
}
.cont > div {
width: inherit;
height: inherit;
background-color: grey;
display:table-cell;
vertical-align:middle;
text-align: center;
}
.cont img {
max-width: 150px;
max-height: 150px;
}
If I understood you correctly, this should work for you.