Website image "problem"

[robeng]

Hi! We have a school project were we shall make a website. I have a "problem" with a image. It is kind of hard to explain the problem but I will try and I have uploaded a video to try to make it more understandible. What I want to do is to make a image not scale on the width when it scale on the height. At the moment when I drag the window witch makes the height change the image width changes and the picture looks realy bad. Look at this video and see for your selfs.

I want the picture to work as in gmail.

Thanks in advance!

 

[minibois]

Can you give me some of the code of the image? (either just the HTML or the CSS if you have that too).

I feel like you are setting the height and width of the image independently, so the image always wants to have half the page's width, but at the same time also wants to be the height of the text. Causing this effect.

[Enderman]

The image in gmail is centered, fixed height+width, and has overflow on so that the edges just get hidden when the width changes.

If you want more help you will need to post your html code so that people can see and fix it.

[linusforsell]

The solution depends a bit on how you've implemented the image.

The simplest way would be to use a background image, center it and set it to cover the available space.
 

.image-class-you-use {
	background-image: url(your-url);
	background-position: center;
	background-size: cover;
}

 

[robeng]

2 minutes ago, Minibois said:

Can you give me some of the code of the image? (either just the HTML or the CSS if you have that too).

I feel like you are setting the height and width of the image independently, so the image always wants to have half the page's width, but at the same time also wants to be the height of the text. Causing this effect.

For the code I have an class that sets the image width to 50% of the page. To set the hight I use the event onrezise that calls a function that gets the height of the section next to the image and set the image height to that. javascript code:

function sätHöjd() {
	var y = document.getElementById("s1").offsetHeight;
	document.getElementById("img1").style.height = y + "px";
}
sätHöjd();

 

[robeng]

16 minutes ago, linusforsell said:

The solution depends a bit on how you've implemented the image.

The simplest way would be to use a background image, center it and set it to cover the available space.
 

.image-class-you-use {
	background-image: url(your-url);
	background-position: center;
	background-size: cover;
}

 

So I should have a div with a background image or can I set thouse properties in my img tag?

[linusforsell]

23 minutes ago, robeng said:

So I should have a div with a background image or can I set thouse properties in my img tag?

A div would be preferable, yes.