Css - Keep Image Original Size Inside Smaller Div - Stack Overflow
Có thể bạn quan tâm
-
- Home
- Questions
- Tags
- Users
- Companies
- Jobs
- Discussions
- Collectives
-
Communities for your favorite technologies. Explore all Collectives
- Teams
Ask questions, find answers and collaborate at work with Stack Overflow for Teams.
Try Teams for free Explore Teams - Teams
-
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 CollectivesTeams
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 8I 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; } Share Improve this question Follow edited Dec 7, 2016 at 13:44 service-paradis 3,3904 gold badges37 silver badges45 bronze badges asked Jun 16, 2014 at 17:45 NicoliNicoli 9042 gold badges9 silver badges26 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
4 Answers
Sorted by: Reset to default Highest score (default) Trending (recent votes count more) Date modified (newest first) Date created (oldest first) 7If 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,3904 gold badges37 silver badges45 bronze badges 1- @Nicoli See also: Image Auto Resize – eyoung100 Commented Jun 16, 2014 at 20:28
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.6k8 gold badges64 silver badges86 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
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 | 0Your 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 112 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 discardedSign up or log in
Sign up using Google Sign up using Email and Password SubmitPost as a guest
Name EmailRequired, but never shown
Post Your Answer DiscardBy 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
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.jsRelated
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 divHot 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?
To subscribe to this RSS feed, copy and paste this URL into your RSS reader.
defaultTừ khóa » Html Keep Original Image Size
-
How To Keep Dimensions Css Image Code Example - Code Grepper
-
How To Resize An Image In HTML?
-
How To Resize An Image With HTML - Computer Hope
-
Setting Height And Width On Images Is Important Again
-
Object-fit | CSS-Tricks
-
How To Fill A Box With An Image Without Distorting It - MDN Web Docs
-
Set The Height And Width Of An Image Using Percent - Tryit Editor V3.7
-
Resize Images Proportionally While Keeping The Aspect Ratio
-
How To Get Original Image Size (Width & Height) In JavaScript
-
C37: Using CSS Max-width And Height To Fit Images
-
Advanced Cropping, Resizing, And Resampling - Adobe Support
-
Photoshop Image Size And Resolution - Adobe Support
-
Preserve An Image's Aspect Ratio When Resized
-
HTML Tag: Change The Width Of A Picture In HTML »