CODEWITHSUNDEEP
cssimageheightscale
Reskk
Reskk

Reputation: 217

Same Height Image & Text

Is there any way I can make an image div scale it's height to the text beside it?

I'm designing a blog post element which has some text to the left and an image to the right, however the text and image go out of kilter at certain resolutions which doesn't look great. The best thing I can think of right now is just giving the image a static height but that doesn't really solve the issue and I'd have to put in different heights for different breakpoints which would look quite janky when resizing.

I am trying to emulate the look of this: https://www.lonelyplanet.com/france/paris#survival-guide (Scroll to the 'Recent Articles' section)

HTML 

    <div class="recent-petra">
    <div class="petra-content">
    <h4>Petra</h4>
    <cite>Oct. 4</cite>
    <p class="recent-desc">Enim vitae pellentesque nec phasellus, quis in vitae, leo in eros donec, pede volutpat. Donec nunc mi vel, quis malesuada, sed proin curabitur orci ipsum volutpat, eu eu id blandit ultricies sodales</p>
    </div> <!-- petra-content -->
    <div class="petra-img"></div>
    </div>

CSS

.recent-petra {
display: flex; }

.petra-content {
 width: 60%;
 margin: 0 5%; }

 .petra-img {
 width: 20%;
 background-image:     url('http://4.bp.blogspot.com/_qWovdGs59MY/RykS9HDQGMI/AAAAAAAAAJo/s79SRNqRNok/s400/Petra+1.jpg');
 height: 300px;
 margin: 0 5%; }

The codepen is here: http://codepen.io/reskk/pen/ozPwAw - probably a lot better to look there so you get a visual example of what I'm talking about.

I mean.. is this something that is even doable with CSS? Am I trying to do something that is just a massive pain i.e. do I have to find appropriately-sized images etc. or can I achieve this using CSS?

I essentially want the image height to scale according to the height of the text beside it so that it's nice and responsive.

Thanks, Reskk

Upvotes: 2

Views: 4987

Answers (2)

user7024289
user7024289

Reputation:

You're on the right track with flexbox and background-image here. A couple of things are throwing you off. First is that you've got the image div set to a pixel height. That'll throw the equal height columns in Flexbox off. Second is that margins on divs inside the container count towards its height. So on CodePen, your paragraph has a native margin of 1em 0em, and since it's the last item in that column, the height of the column on the right is matching it.

Upvotes: 1

the12
the12

Reputation: 2415

The site you mention uses a fixed height at various breakpoints for images. It really is the standard way to do images (other way involves making height responsive, which in my experience makes the picture way too small at certain breakpoints. It scales diagonally, instead of by horizontally (width responsive)).

In order to scale your images with your text, you will have to use breakpoints using media queries, which will at various breakpoints change the height of the images and text of the content.

@media (min-width: 0px) and max-width(400px){

img{
width:40%
height:200px;
}

#divcontainingtext{
font-size:14px;
}
}

@media (min-width: 401px) {
/* insert new fixed height and new font-size here */
}

For more information on media queries see: http://www.w3schools.com/css/css_rwd_mediaqueries.asp

Upvotes: 0

Related Questions