search

loktar00 / react-lazy-load

React component that renders children elements when they enter the viewport.
MIT License
979 stars 166 forks source link

Not responsive #61

Open Cam opened 8 years ago

Cam commented 8 years ago

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

ganmor commented 8 years ago

You can specify a height in percentage

ghost commented 8 years ago

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 commented 8 years ago

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

xims commented 7 years ago

Is there any solution for this yet? Thanks!

stereobooster commented 7 years ago

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

stereobooster commented 7 years ago

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 commented 2 years ago

Will add to the example.