Css - Keep Image Original Size Inside Smaller Div - Stack Overflow

1. 1. Home
   2. Questions
   3. Tags
   4. Users
   5. Companies
   6. Jobs
   7. Discussions
   8. Collectives

   9. Communities for your favorite technologies. Explore all Collectives

2. Teams

   Ask questions, find answers and collaborate at work with Stack Overflow for Teams.

   Try Teams for free Explore Teams
3. Teams

4. Ask questions, find answers and collaborate at work with Stack Overflow for Teams. Explore Teams

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams Keep image original size inside smaller div Ask Question Asked 10 years, 5 months ago Modified 1 year, 11 months ago Viewed 39k times 8

I have an image that is 600x400px, and want it inside a smaller div of size 240x200px, but the image shrinks or gets distorted. I want the original size image centered in the smaller div, which would hide some of the image

I wrote this CSS rule to apply to different image sizes.

.theBox { float: left; overflow: hidden; width: 240px; height: 200px; } .theBox img { display: block; height:100% !important; width:100% !important; }

• image
• css
• css-transforms

Share Improve this question Follow edited Dec 7, 2016 at 13:44 service-paradis 3,39044 gold badges3737 silver badges4545 bronze badges asked Jun 16, 2014 at 17:45 NicoliNicoli 90422 gold badges99 silver badges2626 bronze badges 2

• I must ask, why are you not using a program like GIMP or PhotoShop to resize the images, so you don't need to worry about distortion etc.? – eyoung100 Commented Jun 16, 2014 at 19:04
• Because I do not want to create lots of thumbnails, the image shown on this div is a link to a main article. – Nicoli Commented Jun 16, 2014 at 20:24

Add a comment |

4 Answers 4

Sorted by: Reset to default Highest score (default) Trending (recent votes count more) Date modified (newest first) Date created (oldest first) 7

If you specify a 100% size for your image. Your image will then take 100% of its container.

The thing you want is keeping your file at its original size, so do not specify any size for your image.

overflow:hidden is the key to show only a part of your image.

If you want to always have the center of your image visible, you should take a look at this CSS3 property transform:translate(-50%,-50%) with a proper positioning.

Take a look at this jsfiddle and tell me if it can help you.

Edit: With 2020 modern browser, it may be useful to take a look at the CSS object-fit property. In particular object-fit: cover;. Take a look at this updated jsfiddle.

.imageParent, .imageParentCover { position: relative; text-align: center; width: 200px; height: 200px; overflow: hidden; } /* Solution using `transform: translate`: */ .imageParent img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } /* Solution using `object-fit: cover`: */ .imageParentCover img { object-fit: cover; width: 100%; height: 100%; } Solution using <code>transform: translate</code>: <div class="imageParent"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/640px-Google_2015_logo.svg.png" /> </div> <hr /> Solution using <code>object-fit: cover</code>: <div class="imageParentCover"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/640px-Google_2015_logo.svg.png" /> </div>

Share Improve this answer Follow edited Dec 20, 2022 at 14:17 answered Jun 16, 2014 at 18:27 service-paradisservice-paradis 3,39044 gold badges3737 silver badges4545 bronze badges 1

• @Nicoli See also: Image Auto Resize – eyoung100 Commented Jun 16, 2014 at 20:28

Add a comment | 1

To maintain the aspect ratio, only size one dimension, the browser will size the other to maintain the aspect ratio. With the dimensions you have given you'll need to set the height to fit the container (as opposed to the width) so not to have any gaps:

.theBox img { display: block; height: 100%; }

Example: jsfiddle

Share Improve this answer Follow edited Jun 16, 2014 at 19:08 answered Jun 16, 2014 at 18:07 MrWhiteMrWhite 45.6k88 gold badges6464 silver badges8686 bronze badges 4

• I did try it but image get distorted, looks like it is scaled only in height. – Nicoli Commented Jun 16, 2014 at 18:13
• It shouldn't get distorted if only one dimension is given, however, it will get cropped (but that is unavoidable given the dimensions). I've added a jsfiddle example to my answer. – MrWhite Commented Jun 16, 2014 at 18:31
• This solution is also correct but the one from morgul helped me to understand what was going on, anyway, thank you to both of you! – Nicoli Commented Jun 16, 2014 at 20:32
• 1 I realise my solution, as it stands, does not center the image. If the image dimensions stay the same then you could apply margin-left:-30px (or use a percentage) to the img in order to center it. +1 to morgul's solution, I think using transform:translate(-50%) would be the better way to solve this (providing browser support is sufficient for you) as it would seem to be independent of any image dimensions. – MrWhite Commented Jun 16, 2014 at 20:40

Add a comment | 0

If you specify a 100% size for your image. Your image will then take 100% of its container. In order to maintain the actual size, you should write an inline style like this: style="width: auto"

Share Improve this answer Follow answered Jan 22, 2016 at 17:24 rahgozarrahgozar 1 Add a comment | 0

Your container should have overflow: hidden;. Scale down your image with the object-fit property.

.imageContainer{ width: 100px; height: 100px; // align center the image display: flex; justify-content: center; align-items: center; overflow: hidden; } img{ object-fit: scale-down; width: 100%; height: 100%; } Share Improve this answer Follow edited Nov 17, 2022 at 8:31 answered Nov 17, 2022 at 8:31 MANISH PRAJAPATIMANISH PRAJAPATI 1122 bronze badges Add a comment |

Your Answer

Reminder: Answers generated by artificial intelligence tools are not allowed on Stack Overflow. Learn more

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.
• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Draft saved Draft discarded

Sign up or log in

Sign up using Google Sign up using Email and Password Submit

Post as a guest

Name Email

Required, but never shown

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged

• image
• css
• css-transforms

or ask your own question.

• The Overflow Blog
• The open-source ecosystem built to reduce tech debt
• Featured on Meta
• More network sites to see advertising test
• We’re (finally!) going to the cloud!
• Call for testers for an early access release of a Stack Overflow extension...

Linked

2120 How to auto-resize an image while maintaining aspect ratio 9 Capture screenshot with Vue.js

Related

3 Scale image properly but fit inside div 1 image resize within div (again) 53 CSS scale down image to fit in containing div, without specifing original size 2 Resize image inside div 28 Rotate and scale image to "fit" container div 1 resize image when div resizing 0 Parent DIV retain size when transforming child img 0 Div container still keeps sized of original image size when transform is used 0 css resizing image as parent div shrinks 0 Fit and re-size properly an image inside a div

Hot Network Questions

• Generate A Point Inside An Arbitrary Concave Polygon
• Is there any way to get money back from WhatsApp scammers?
• routing LAN connections among clients on same ISP router device
• What is the purpose for the blackbody radiation graph to be graphed using the below parameters?
• Does Ukraine consider itself to be at war with North Korea?
• What is the part number of this angled bar part?
• How to upgrade the TLS on old server without reinstalling the core OS?
• Can I pay everywhere in Singapore with an electronic wallet?
• creating named control sequences
• Is The Orville dead?
• What is the proper interpretation of the output 'HF' energy of a ground-state Gaussian 16 calculation using the opt keyword (B3LYP)?
• What are the reasons to use a downward vertical stabilizer?
• What's the translation of "stand-up meeting" in French?
• Who said: "The crucified Christ is our High Priest?"
• Could not find add method: AddExcludedTemplate (type: Sitecore.ContentSearch.SolrProvider.SolrIndexConfiguration)
• Manga (possibly a manhua) where the main character travels up a tower. He meets a bunny every time he goes up a stage
• Defining a uniform distribution over the perimeter of a polygon
• Why is \cs_generate_variant:Nn \clist_put_right:Nn { Nc } deprecated when the recommended \clist_put_right:Nv doesn't give the expected result?
• In a (math) PhD personal statement/statement of purpose, should I use mathematical notation, or english, if math is likely clearer?
• Why did Tunisian Jews not celebrate Purim for a long time?
• How to understand whether an electron in an atom is in superposition, ground or excited state?
• Any downside to getting separate health insurance for a child?
• Could Dukkha be interpeted as anxiety?
• Switched to Gas from Induction, hate it, is it the range?

more hot questions Question feed Subscribe to RSS Question feed

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

default