css - Resize a Div Based on Height but Retain Aspect Ratio (almost got it) Strange Reload bug -

-

there lots of solutions maintaining aspect ratio when resizing videos based on width of parent div. of them depend on fact "padding-top" , "padding-bottom" calculated based on width rather height.

i'm trying similar, want resize video based on height of parent div.

to need create div keeps aspect ratio regardless of height. may sort of lame way it, decided use image because can set height of image appropriate aspect ratio 100% , let height sort out.

i close making work. of now, have been able make inner div want do, except not redraw on window resize. however, if resize window reload, works. ideas?

here's demo (it's not codepen issue i've done locally well)

good thought using image , height: 100%. box same aspect ratio image, doesn't reflow box on window resize whatever reason.

here's demo cleaner css , javascript hack fix reflowing on window resize.

in demo, use 16px 9px data uri image set aspect ratio, preventing needless http request. if need different ratio image, use site convert image data uri: http://dataurl.net/#dataurlmaker

i managed solve reflowing issue basic jquery. on $(window).resize(), toggle class on body makes ratio images go text-align: left text-align: justify tricks browser reflowing box.

browser support

works in chrome, safari, mobile safari, firefox, , ie9+. resizing quite smooth overall, safari stutters bit.

ie6/7 don't support display: inline-block box 100% width , correct height. (not bad fallback!)

ie8 sizes box's height correctly, width wide original image (16px). way found around using html5boilerplate style ie conditional tags set embed parent display: block in this demo

css only

if have have css solution, setting animation on ratio image toggle small amount of padding works in chrome, safari , firefox. however, continually forcing browser re-render page layout, grossly inefficient compared rendering page layout on window resize.

.ratio { animation: myfirst 1s infinite; } @keyframes myfirst {     { padding-top: 1px; }     { padding-bottom: 1px; } }

hope helps!


Comments

Post a Comment

Popular posts from this blog

c++ - Creating new partition disk winapi -

-
i'am trying create new partition , mount volume new, thought createfile let me this, code : lpctstr lpfilename=l"\\\\.\\device\\harddisk0\\partition3"; handle handl=createfile( lpfilename, generic_read | generic_write, file_share_read | file_share_write, null, create_always, file_attribute_normal, null ); if (handl==invalid_handle_value) { qdebug()<<"handl invalid"<<" error"<<getlasterror();} bool success = definedosdevice(ddd_raw_target_path,l"i:",l"\\device\\harddisk0\\partition3"); if(!success) qdebug()<<" definedosdevice failed "<<getlasterror(); bflag = getvolumenameforvolumemountpoint( l"i:\\", // input volume mount point or directory /** u in dir
Read more

Android Prevent Bluetooth Pairing Dialog -

-
i'm developing internal application uses bluetooth printing. want bluetooth pairing occur without user input. have managed working trapping android.bluetooth.device.action.pairing_request broadcast. in broadcast receiver call setpin method, , pairing works ok, bluetoothpairingdialog displayed second or two, disappears - see link below. https://github.com/android/platform_packages_apps_settings/blob/master/src/com/android/settings/bluetooth/bluetoothpairingdialog.java since broadcast non-ordered, can't call abortbroadcast() , , wondering if there other way prevent pairing dialog appearing. can hook window manager in way? i haven't been able come way without modifying sdk. if you're oem, it's easy (i'm on 4.3): in packages/apps/settings/androidmanifest.xml, comment intent filter pairing dialog: <activity android:name=".bluetooth.bluetoothpairingdialog" android:label="@string/bluetooth_pairing_request"
Read more

php - joomla get content in onBeforeCompileHead function -

-
i'm developing joomla system plugin. need add javascript , css files if [myshortcode] shortcode found in content. how can content in onbeforecompilehead function function onbeforecompilehead() { $document = jfactory::getdocument(); //add scripts if shortcode found ... $document->addstylesheet($cssfile, 'text/css', null, array()); the $content = jresponse::getbody(); not work. thanks try this, for style sheet, $document = jfactory::getdocument(); $document->addstylesheet('http://domain.com/templates/css/style.css'); for javascript file $document = jfactory::getdocument(); $document->addscript('full url'); also can this, $document = jfactory::getdocument(); // add javascript $document->addscriptdeclaration(' window.event("domready", function() { alert("an inline javascript declaration"); }); '); // add styles $style = 'body {'
Read more