Two side by side columns and image stretch

[afridy]

Hi folks,
my client’s web site had a full width slider and he wants to split the area to two columns as follws. left 30% and right 70%, Then add an new promotion banner to left side.

i alredy tried the left side banner as background. but on various screen resolution the aspect ratio brakes.

his main condition is, image proptions should never distorted on desktop screen resolutions. coz his employees mostly designers use diffrent differnt desktop screen resolutions and banners should display in correct propotions.

now the slider has img banners while my bigest question is, with above condition in mind, should i use the ad banner as img or as background image?

edited: another condition is, both sides should also maitain same height always.

[ralphm]

Don’t use a background image for anything other than decoration. Those images have text in them, so they are obviously for conveying meaning. Ideally, use actual text, or at least provide alt text for the image.

This layout is a perfect candidate for Grid.

Check out the demos early in this thread for a basic idea of a similar layout using Grid: Dynamically resize and reshape containers and images