Question

我看到一些解决方案，其中使用truesize属性使JCrop正确处理响应图像。但是，在使用JCrop时，我很难在第一时间对图像做出响应。如果我删除了jCrop代码并添加了以下css，则图像会响应。

简而言之 - JCrop的作品。响应式图像有效。但是当放在一起时，图像没有响应。

这里的JSFiddle：只是取消注释css。 http://jsfiddle.net/work77/oh5esg19/

img{
max-width:80%;
max-height:80%;
}

非常相似的问题在这里没有答案： Jquery JCrop functionality on fluid images

有什么建议吗？感谢。

Answer 1

尝试：

img {
    max-width:80%;
    height:auto;
}
.jcrop-holder img {
    max-width: none;
}

Answer 2

而不是用css设置最大宽度，你可以用jcrop限制它。

[2016-07-16 16:26:00,983][WARN ][transport.netty          ] [Grasshopper II] exception caught on transport layer [[id: 0x98b5bc2f, /127.0.0.1:64412 => /127.0.0.1:4301]], closing connection
java.lang.IllegalStateException: Message not fully read (request) for requestId [0], action [cluster/nodes/info], readerIndex [39] vs expected [57]; resetting
    at org.elasticsearch.transport.netty.MessageChannelHandler.messageReceived(MessageChannelHandler.java:120)
    at org.jboss.netty.channel.SimpleChannelUpstreamHandler.handleUpstream(SimpleChannelUpstreamHandler.java:70)
    at org.jboss.netty.channel.DefaultChannelPipeline.sendUpstream(DefaultChannelPipeline.java:564)
    at org.jboss.netty.channel.DefaultChannelPipeline$DefaultChannelHandlerContext.sendUpstream(DefaultChannelPipeline.java:791)
    at org.jboss.netty.channel.Channels.fireMessageReceived(Channels.java:296)
    at org.jboss.netty.handler.codec.frame.FrameDecoder.unfoldAndFireMessageReceived(FrameDecoder.java:462)
    at org.jboss.netty.handler.codec.frame.FrameDecoder.callDecode(FrameDecoder.java:443)
    at org.jboss.netty.handler.codec.frame.FrameDecoder.messageReceived(FrameDecoder.java:303)
    at org.jboss.netty.channel.SimpleChannelUpstreamHandler.handleUpstream(SimpleChannelUpstreamHandler.java:70)
    at org.jboss.netty.channel.DefaultChannelPipeline.sendUpstream(DefaultChannelPipeline.java:564)
    at org.jboss.netty.channel.DefaultChannelPipeline$DefaultChannelHandlerContext.sendUpstream(DefaultChannelPipeline.java:791)
    at org.elasticsearch.common.netty.OpenChannelsHandler.handleUpstream(OpenChannelsHandler.java:75)
    at org.jboss.netty.channel.DefaultChannelPipeline.sendUpstream(DefaultChannelPipeline.java:564)
    at org.jboss.netty.channel.DefaultChannelPipeline.sendUpstream(DefaultChannelPipeline.java:559)
    at org.jboss.netty.channel.Channels.fireMessageReceived(Channels.java:268)
    at org.jboss.netty.channel.Channels.fireMessageReceived(Channels.java:255)
    at org.jboss.netty.channel.socket.nio.NioWorker.read(NioWorker.java:88)
    at org.jboss.netty.channel.socket.nio.AbstractNioWorker.process(AbstractNioWorker.java:108)
    at org.jboss.netty.channel.socket.nio.AbstractNioSelector.run(AbstractNioSelector.java:337)
    at org.jboss.netty.channel.socket.nio.AbstractNioWorker.run(AbstractNioWorker.java:89)
    at org.jboss.netty.channel.socket.nio.NioWorker.run(NioWorker.java:178)
    at org.jboss.netty.util.ThreadRenamingRunnable.run(ThreadRenamingRunnable.java:108)
    at org.jboss.netty.util.internal.DeadLockProofWorker$1.run(DeadLockProofWorker.java:42)
    at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1142)
    at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:617)
    at java.lang.Thread.run(Thread.java:745)

设置boxWidth和boxHeight将设置你的盒子的大小，里面的图像将保持其比例。

如何使用JCrop获取响应式图像

2 个答案: