CODEWITHSUNDEEP
htmlcssimage
Mads Nielsen
Mads Nielsen

Reputation: 106

Crop image at the edge of the screen html

I want to cut the edge off my image when the image is to large to fit the screen.

When the screen is wide enough to fit the image

enter image description here

This happens when the screen is too small enter image description here

I would like to cut the image at the edge of the screen/red line. If i set the max-width to 100% it just squeezes the image together. Here is the code for the image:

<div id="container">
    <img src="ptable.PNG" style="height:400px;width: auto;margin: auto;float: left;">
</div>

Upvotes: 0

Views: 3608

Answers (2)

Andreas
Andreas

Reputation: 692

You want to set the overflow CSS-attribute.

.container {
   overflow: hidden;
}

or

<div id="container" style="overflow: hidden">

For more information see: http://www.w3schools.com/cssref/pr_pos_overflow.asp

Upvotes: 0

Kevin Kulla
Kevin Kulla

Reputation: 460

You can just add overflow:hidden to your container and it'll stop the image from going past it.

Upvotes: 3

Related Questions