Question

我有一个动态JS代码，可以在每次点击时更改class CEditor{ @Override public void createPartControl(Composite parent) { super.createPartControl(parent); final IWorkbenchHelpSystem helpSystem = PlatformUI.getWorkbench().getHelpSystem(); parent.addHelpListener(new HelpListener() { public void helpRequested(HelpEvent e) { IContextProvider provider = (IContextProvider) CEditor.this.getAdapter(IContextProvider.class); if (provider != null) { IContext context = provider.getContext(CEditor.this); if (context != null) { helpSystem.displayHelp(context); return; } } helpSystem.displayHelp(ICHelpContextIds.CEDITOR_VIEW); }}); ... }} class MyEditor{ @Override public void createPartControl(Composite parent) { super.createPartControl(parent); Listener[] listeners = parent.getListeners(<<eventType>>); for (Listener listener : listeners) parent.removeHelpListener((HelpListener) listener);}的背景图片。如何根据图像大小更改div高度和宽度？

这是我的代码，可以更好地理解我的问题：

div

我在此处设置了修正大小element.style { background: rgba(0, 0, 0, 0) url("../wp-content/uploads/ssf-wp-uploads/images/24/image.jpg") no-repeat scroll center center; cursor: pointer; height: 150px; position: relative; }，但背景图片大小可能会发生变化。所以我想根据背景图像高度设置150px高度。

Answer 1

由于您已经提到要将 div 高度自动调整为背景图像，请注意，背景图像对 div 它在。中声明。

div{ background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg'); background-size: contain; background-repeat: no-repeat; width: 100%; padding-top: 66.64%; /* (img-height / img-width * container-width) */ /* (853 / 1280 * 100) */ }

这是让背景图像像 img 一样工作的技巧。为了更好地了解如何预先了解图像的大小，我建议您仔细阅读作者的答案以及此处的评论：How to get div height to auto-adjust to background size?

Answer 2

<强> CSS

.elementstyle{
        background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
        background-size: contain;
        background-repeat: no-repeat;
        background-size: contain;

}

在jQuery中：

var img= $('img');

img.removeAttr("width");
img.removeAttr("height");

var img_width = img.width();
var img_height = img.height();

$('.elementstyle').width(img_width).height(img_height);

编辑：我刚刚注意到您要求从CSS获取背景图片的大小。上面的方法将从以下方法获取属性：

<div class="elementstyle"><img src=""/></div>

您必须考虑在jQuery中定义背景图像的大小。 Here's some reading material.

我有div，我想根据背景图像高度设置div高度

2 个答案: