Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Not responsive #61

Open
Cam opened this issue May 12, 2016 · 7 comments
Open

Not responsive #61

Cam opened this issue May 12, 2016 · 7 comments

Comments

@Cam
Copy link

Cam commented May 12, 2016

With the requirement of a fixed height setting, this plugin fails to work inside modern apps where responsive layouts are a standard requirement.

@ganmor
Copy link

ganmor commented Jul 18, 2016

You can specify a height in percentage

@ghost
Copy link

ghost commented Aug 28, 2016

That doesn't make it responsive, that makes is a % of the container height, whereas the image width is 100% is what dictates its height of auto.

@ctrlplusb
Copy link

Instead of just height could you not expose a className and/or style?

@xims
Copy link

xims commented Feb 3, 2017

Is there any solution for this yet?
Thanks!

@stereobooster
Copy link

It should take ratio and calculate height based on width of component. Like responsive embed in foundation.

@stereobooster
Copy link

Here is the solution

<LazyLoad className="responsive">
  <img src='http://apod.nasa.gov/apod/image/1502/HDR_MVMQ20Feb2015ouellet1024.jpg' alt='' width="1024" height="762" />
</LazyLoad>
.responsive {
  position: relative;
  height: 0;
  padding-bottom: 75%;
  overflow: hidden;
}

.responsive iframe,
.responsive object,
.responsive embed,
.responsive video,
.responsive img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@loktar00
Copy link
Owner

Will add to the example.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

6 participants