I have been experimenting with various techniques, but I am encountering a challenge with this particular issue. My goal is to create columns within a section where each column has a height of 100%. The complication arises when one of the columns contains an image that needs to scale to fill the entire column.
The structure I want to achieve is one column for text (with dynamic content from WordPress) that is 66% wide, and another column for an image that is 33% wide. The position of the image can be on the left or right depending on a class.
Below is the HTML code I am working with:
<section class="page-section color-brand left-image image-third">
<div class="page-section-mid-wrapper">
<div class="image-wrapper left-image image-third">
<img src="img.jpg" alt="">
</div>
<div class="page-section-wrapper">
<div class="page-section-content">
Variable content here
</div>
</div>
</div>
</section>
While many CSS techniques focus on achieving a solid background color for both columns, I specifically need the image to scale. I am open to switching from using an img tag to an inline style="background-image" to achieve the scaling effect, but I am struggling to make the column heights match.
I attempted using display:table which provided a close solution, but I disliked that I couldn't switch the image's position without altering the HTML structure. My current design relies on float which allows me to change the image placement simply by toggling a class (e.g., the left-image class in the code above).
With the float method, here is an example of my progress so far: http://jsfiddle.net/no80ayc2/2/ Upon resizing the view, you will notice that the image does not maintain the same height as the container.
I came across suggestions involving relative/absolute positioning, but I could only get it to work with a fixed height for the container, which is not suitable for my needs: http://jsfiddle.net/qLa4g7fL/1/
UPDATE: Just to clarify, I intend for the image to occupy the entire space (33% width by 100% height) and accept cropping as needed.
Here is a rough representation of how the layout should appear: