Skip Navigation

[Resolved] Image not stretching to fill row

This thread is resolved. Here is a description of the problem and solution.

Problem: I have placed a custom field image in a full-width Layouts cell, but the image does not stretch to fill the row.

Solution: Apply a width of 100% to the image using the Types field shortcode and style attribute:

[types field="your-image-slug" style="width:100%;"][/types]

Relevant Documentation:
https://toolset.com/documentation/customizing-sites-using-php/functions/#image

0% of people find this useful.

This support ticket is created 6 years, 5 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

This topic contains 3 replies, has 2 voices.

Last updated by andyM-7 6 years, 5 months ago.

Assisted by: Christian Cox.

Author
Posts
#916285

Tell us what you are trying to do? I am trying to display an image in Layouts – I would like the image to stretch to fill the row in which it is located. If I use an image with a different aspect ratio, it is fine, but ultimately I would like any image to stretch to fill the row and retain its proportions.

Is there any documentation that you are following? No

Is there a similar example that we can see? No

What is the link to your site? hidden link

#916294
Screen Shot 2018-06-21 at 16.31.29.png

Screenshot attached – The rows are exactly the same width, but the larger image (on top) is not stretching. I have tried fiddling around with the display options for the image in Layouts, with no success. I can quite easily make the image smaller by changing the custom size, but I can't get it to stretch and be bigger.

#916329

Hi, you can add some CSS that tells the image to stretch out to fill the available space. Try this shortcode and let me know the results:

[types field="your-image-slug" style="width:100%;"][/types]
</div>
#916510

Wow – a lot easier than I thought. Solved the issue entirely! Thanks a lot.