Trying to cut an image off

Question

I'm creating a website in Twitter Bootstrap 3. This is what I have so far. http://ts-mc.net/

Everything works fine, however, the image on the homepage stretches out. I want to keep it so that the image isn't responsive, that way it works fine on mobile devices, however I'd like to get rid of the excess image that isn't displayed.

Try to avoid linking to external sites: the question will lose context over time due to link rot and changes. Try porting your question over to a JSfiddle, for example. — Terry, Apr 04 '14 at 01:00

score 1 · Accepted Answer · edited May 23 '17 at 11:43

1

Use overflow:hidden on a container div. See this fiddle.

HTML

<div><img src='src'></div>

CSS

div
{
    overflow:hidden;
    width:80px;
}

You can set the container div width and height to 100% and then the rest of the image will be cropped.

If it is a background image then use a pseudo element as described here.

Update

As you mention overflow-x:hidden is a good refinement of overflow-hidden if you just want to crop the width.

edited May 23 '17 at 11:43

Community

1
1

answered Apr 04 '14 at 01:04

acarlon

16,764
7
75
94

Thanks! The overflow: hidden didn't work out for what I needed, however overflow-x: hidden worked just fine! – Jerred Shepherd Apr 04 '14 at 03:00
@user247301 - glad that you got it. I have updated my answer. You may want to accept it (click the tick) so that it doesn't show up as unanswered. – acarlon Apr 06 '14 at 21:20
Thanks once again, I've ticked it. – Jerred Shepherd Apr 08 '14 at 03:40

Trying to cut an image off

1 Answers1