javascript - CSS: How to scale an <img> to cover entire parent <div>? -

-

question:

http://jsfiddle.net/log82brl/15/

the <img> isn't shrink wrapping expect min-width:100%

i'm trying shrink <img> until either height or width matches container

click anywhere in <iframe> toggle container shapes

please try edit <img> css:

1) maintain aspect ratio

2) cover entire surface area of container div

3) only edit image

this centering approach looks kinda sketch it's pretty robust

my question specifically: scale <img> fill (maintain aspect ratio cover entire surface) of parent <div> parent <div> resizes

maybe somehow use css flex box-layout or something? maybe transform?

answer:

http://jsfiddle.net/log82brl/17/

set html source transparent base64 pixel (credit css tricks)

<img id="img" src="data:image/gif;base64,r0lgodlhaqabaiaaaaaaap///yh5baeaaaaalaaaaaabaaeaaaibraa7" />

use css background property

#img {     width: 100%;     height: 100%;     background: url(http://i.imgur.com/0bbscub.gif) no-repeat center;     background-size: cover; }

if don't want touch container, put background on <img>

#img {    background: url(imgpath) no-repeat center;   background-size: cover; }

Comments

Post a Comment

Popular posts from this blog

Android : Making Listview full screen -

-
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".mainactivity"> <edittext android:layout_margintop="5dp" android:layout_width="match_parent" android:layout_height="50dp" android:background="@drawable/location_edittext" android:id="@+id/locationeditext" android:textsize="15sp" android:textcolor="#999" android:paddingleft="15dp" /> <com.example.ravi_gupta.slider.viewpagercustomduration android:layout_width="wrap_content" android:layout_height="0dp" android:id="@+id/viewpager" android:scrollbarstyle="outsideoverlay" android:layout_weight="0.5...
Read more

javascript - Parse JSON from the body of the POST -

-
i'm using cameratag.com record video on website. service can send json response server can save data database. don't know how proceed here: the documentation states please note json repsonse passed in body of post , not form parameters. here example of how parse response in ruby: data = json.parse(request.raw_post) video_uuid = data["uuid"] but don't know how data on javascript. i'm not experienced in js please bare me :) post sample: { "uuid": "00012710-4b65-0131-ffe6-22000a499ea4", "camera_uuid": "98373a20-79ee-0130-3e42-1231390fcc11", "created_at": "2013-12-20t05:25:02.000z", "percent_complete": 100, "short_code": "kktb4q", "metadata": { }, "state": "published", "recorded_from": "http://singwho.com", "publish_type": null, "formats": [ { "name...
Read more

Automatically Create Database in Entity Framework 6 with Automatic Migrations Disabled -

-
i able automatically create new database, if not exist, using code-first ef6 automatic migrations disabled. if recall correctly, before automatic migrations existed in entity framework, worked fine. however, in ef6, receive following exception: an exception of type 'system.data.entity.migrations.infrastructure.automaticmigrationsdisabledexception' occurred in entityframework.dll not handled in user code additional information: unable update database match current model because there pending changes , automatic migration disabled. either write pending model changes code-based migration or enable automatic migration. set dbmigrationsconfiguration.automaticmigrationsenabled true enable automatic migration. to verify exception not caused external factor in production project, created new test project. however, same exception. for database context, have: public class mycontext : dbcontext { public dbset<entity> entities { get; set; } ...
Read more