CODEWITHSUNDEEP
htmlcssimage
danededane
danededane

Reputation: 425

Making images fit their parent container

I'm currently playing a little with angular bootstrap carousel, and want to display some pictures, and be able to click on them.

My first problem is that not all of my images is exact the same size, and they're not fitting in my bootstrap column. Often the picture is not wide enough, so it leaves alot of free space in the left and right side. Is it possible to crop/zoom in on the image automatically, so it fill out all the space all the time?

Another question I have is.. How do I link each picture to something?

Upvotes: 4

Views: 7120

Answers (1)

isherwood
isherwood

Reputation: 61083

To force your images to upsize to their container, you'll have to apply some CSS. Bootstrap's img-responsive class sets max-width to 100%, but that doesn't force upscaling.

<style>
.oversize {
    width: 100%;
    height: auto;
}
</style>

To link an image, wrap it in an anchor:

<a href="/some-page"><img src="/some-image.jpg" class="oversize" /></a>

Upvotes: 1

Related Questions