Docs

[core365]

Hi, I’ve searched the forum for an answer, but can’t find a solution to adjusting the height of what image is shown when using the Image element. I want to keep the width at 100%, but not show the whole height of it. I’ve used the following in the ‘Style’ field of the Image element, but it squashes the image up so that it’s not in proportion:

width: 100%;
max-height: 100px;

I suppose it needs to hide the image from a certain height so it doesn’t show the rest below it, but I can’t find out how to do it!

I’ve attached a screen grab as I’m currently working on the website and have a maintenance page showing at the mo.

This might be asking a bit much, but is it also possible to specify which part of the image it displays with x and y co ordinates like in Rev Slider?!!

Thanks!

[Joao]

Hi There,

The best practice would be to re-size and re-upload your images.

Hope it helps

Joao

[core365]

Hi, it wasn’t the answer I was looking for, but if it’s not possible to do, then it can’t be helped. It would be useful if this was possible to do, as I’ve wanted to do this before on other websites I’ve done using X Theme.

Cheers

[Joao]

Hi There,

You would need to use the RAW Element, this “trick” it is not possible direct on the image without stretching it.

But you can do that:

Add the following code to RAW Element on Cornerstone.

<div class="image-box"><img src="url.com/logo.jpg"></div>

Add the following code to Appereance > Customizer > Custom > CSS

.image-box { height: 100px; width: 200px; overflow: hidden; }

Hope that helps,

I still advice you uploading the images with the correct size, it is a better choice for performance 🙂

Hope that helps,

Joao

[core365]

Ah, brilliant, spot on!

Many thanks!

[Joao]

🙂

You are welcome,

Joao

[Author]

Posts