Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
How to handle image larger than container?
See original GitHub issueHow to handle image larger than container?
Example use case: Container: 800px x 400px Image: 1600px x 1600px
Actual
Image isn’t cropped to wrapper - adding overflow:hidden to parent solves this issue
Cannot zoom or pan image beyond what was initially visible. Turning bounds off removes the issue, but isn’t desired.
Expected Allow zoom and scroll to any image section, and respect bounds.
Issue Analytics
- State:
- Created 3 years ago
- Reactions:3
- Comments:7
Top Results From Across the Web
Image expanding larger than parent div - html - Stack Overflow
You need to choose either portrait or landscape proportion of your images! So basically you can set height/width to a certain value and...
Read more >How to break an image out of its parent container with CSS
This trick comes courtesy of CSS expert Una Kravets. A simple utility class, .full-width , will break the image out of it's parent...
Read more >Images Larger than Container CSS - DEV Community
This will center the image inside of a element when the elements height and/or width is smaller than the image.
Read more >Sizing items in CSS - Learn web development | MDN
The first image has been given width: 100% and is in a container which is larger than it, therefore it stretches to the...
Read more >How to resize an image in HTML? - ImageKit.io
You can use the object-fit CSS property on the img element to specify how the image should be resized & cropped to fit...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Setting exact width and height is best practice?
@patman1 did you ever find a solution to this problem? I’m currently facing it