CODEWITHSUNDEEP
htmlcssimageresizeautolayout
Grant_E
Grant_E

Reputation: 39

fit any image in a preset size of a div

I have some divs set up to display images as links with and im trying to set up a standardized way to place an image in the div and at LEAST have it stretch the image to fit for me. I would really like to be able to adjust the cropping to fit in the square, but i realize that may be a bit tricky. Heres what i currently have: (tried to post image but dont have the rep just yet so heres a link https://i.sstatic.net/nNRD9.jpg

How would i go about doing this? I thought that using 

style="height:100%; width:100%"

would work, but it still didnt stretch the photo to the maximum height, possibly due to how i have things layed out. In the photo above, each photo is set up like:

<div class="4u 12u$(mobile)">
            <article class="item">
                    <a href="#" class="image fit"><img src="images/resume.jpg" title="My Resume" alt="My Resume" /></a>
                            <header>
                                <h3>My Resume</h3>
                            </header>

Thanks!!

Upvotes: -1

Views: 448

Answers (2)

MhamadK
MhamadK

Reputation: 11

A fiddle (http://jsfiddle.net/), and a pen (http://codepen.io/), are great ways to present what you are trying to do for other people. You can put your HTML, CSS, and JS, and it will render it for you, for free. Check them out.

You can use display: table, display: table-row, and display: table-cell on the div container, <div>, and the <article> respectively.

Another great solution is using a flexbox, Css Tricks have a great guide on it.

If you are interested in grids and frameworks I will suggest that you check out “Foundation”, or “Bootstrap” or the myriad of other HTML5 frameworks.

Put your code in a fiddle, so we will be able to help you out with your code. Until then, here is a suggestion

a{width:auto; display:inline-block; min-height:100px; overflow:hidden;}

img{width:100%;}

Overflow:hidden; will hide the parts of the <img/> that lies outside the bounds of <a>

Upvotes: 1

Samir Selia
Samir Selia

Reputation: 7065

Specifying width and height to .item class might fix it. Please post the css style you have done so far so that we can look into it and suggest changes to achieve your requirement.

Upvotes: 1

Related Questions