CODEWITHSUNDEEP
csscrop
pianofighter
pianofighter

Reputation: 85

CSS - Cropping Image Height To Match Text Length

I've got 2 things sharing section - a header comprised of text, and an imaged floated to its right. I'd like the image width to always be 308px, and its height to crop according to the needs of the text length. I'm not interested in setting a fixed height for .location, as content length may change down the line. How can this be done? (Thank you!)

The HTML:

<section class="location">
<img src="http://evinwolverton.com/img/disc.jpg">
<header>
    <h2>This Is A Headline</h2>
    Etiam porta sem malesuada magna<br/> 
        Mollis euismod. Duis mollis<br/>
        Est non commodo luctus, nisi erat<br/>
        Porttitor ligula, eget lacinia odio<br/>
        Sem nec elit.
</header>
 </section>

The CSS:

.location {
    border: 2px solid #ccc;
    overflow: hidden;
    width: 620px;
    color: #666;
    margin: 40px 0;
}

.location header {
    float: left;
    padding: 25px;
    width: 258px;
}

.location h2 {
    margin: 0 0 10px 0;
    font-size: 1.2em;
    color: #333;
}   

.location img {
    float: right;
    width: 308px;
}

Upvotes: 0

Views: 572

Answers (3)

Ross McLellan
Ross McLellan

Reputation: 1881

Alternative solution to using a background image, if you want this to be an actual <img> tag would be to position .location relative, keep the overflow hidden on here & give the image an absolute position. You may need to give some margin-right on the text holder too, to ensure it doesn't go behind the image.

.location {
    position: relative;
    overflow: hidden;
}
.location img {
    position: absolute;
    top: 0px;
    right: 0px;
}

Upvotes: 2

Jeremy Carlson
Jeremy Carlson

Reputation: 1273

If your image does not need to be an img tag, you could apply it as a background image to your header. But I'm assuming that's not the case.

Try:

.location img {
  position:absolute;
  clip:rect(0px,60px,200px,0px);
}

http://www.w3schools.com/cssref/pr_pos_clip.asp

[EDIT]

Sorry, try clip: rect(0px, 308px, 100%, 0px); and I'm pretty sure you will need to have the image floated inside your header.

Upvotes: 0

Ricardo Souza
Ricardo Souza

Reputation: 16456

The easiest way is to use a background-image aligned to the right-top corner with no-repeat.

Upvotes: 0

Related Questions