Fit To Container Video/image In CSS (aspect Ratio Friendly) - Coderwall

Trang chủ » Html5 Video Scale To Fit Div » Fit To Container Video/image In CSS (aspect Ratio Friendly) - Coderwall

Có thể bạn quan tâm

Last Updated: February 25, 2016 · 19.85K · basiclines Fit to container video/image in CSS (aspect ratio friendly) #css #responsive #video #image #html5

Scale up/down an image or video to fit in container width/height maintaining the aspect ratio (And keep it centered aligned vertically and horizontally)

.wrap { background: yellow; border: solid 1px red; width: 384px; /* Play with this value */ height: 216px; /* Play with this value */ font-size: 0; text-align: center; } .wrap:before { content: ""; width: 1px; height: 100%; display: inline-block; vertical-align: middle; margin-left: -1px; } .wrap video { max-width: 100%; max-height: 100%; display: inline-block; vertical-align: middle; }

Try to play with width/height in: http://dabblet.com/gist/5610937

#css #responsive #video #image #html5

Written by Ismael González

Say Thanks Respond

Related protips

Fully custom select box, simple css only

570.8K 32

Change the Bootstrap NavBar Breakpoint

500.1K 39

Creating full width (100% ) container inside fixed width container.

465.3K 14

Have a fresh tip? Share with Coderwall community!

Post Post a tip Best #Css Authors oldboy 570.6K #css #jQuery #CSS 3 iatek 502.8K #css #Javascript #Node.js praveenvijayan 464.3K #css #Javascript #Python elad2412 415.5K #css #cross browser compatibility #photoshop projectcleverweb 307.7K #css #javascript #Python Related Tags #css #responsive #video #image #html5 Sponsored by #native_company# #native_desc# #native_cta# Filed Under Accelerate Your Web Development Skills Awesome Job See All Jobs Post a job for only $299 Thanks to our sponsor Sponsored by #native_company# — Learn More #native_title# #native_desc# #native_cta#

Từ khóa » Html5 Video Scale To Fit Div