按比例调整图像在运行前我无法访问

我一直在寻找解决方案，并且已经阅读了许多关于图像调整大小和DOM节点搜索以及Wordpress功能和其他任何可能的方法的文章要做。按比例调整图像在运行前我无法访问

继承人的情景......

我创建WordPress的自定义主题的客户端。这是一个报纸网站，需要按照比例自动调整图片大小以适应页面上某个框的功能。通常我会在CSS中设置width:SomeWidth，但我没有任何方法来识别img。

我的索引页是一个框架，wordpress引擎加载内容。这意味着在显示给用户之前，我无法控制图像上的属性。（是的，我们可以手动大小每一个画面，但我的客户不希望有这样做，她也希望它是单页原稿尺寸

这里是一个盒子。

<div class="box-center"> 
     <h1>Music 101</h1> 
     <div class="box-inner-center"> 
      <ul> 
       <?php 
        global $post; 
        $args = array('numberposts'=>1,'category'=>get_cat_ID('Music 101')); 
        $myposts=get_posts($args); 
        foreach($myposts as $post) : setup_postdata($post); ?> 
         <li><?php the_content(); ?></li> 
        <?php endforeach; ?> 
      </ul> 
      <a class="more" href="<?php echo esc_url(get_category_link(get_cat_ID('Music 101'))); ?>">More Music 101 >></a> 
     </div> 
    </div>

在页面加载后，这是什么出来：

<div class="box-center"> 
    <h1>Music 101</h1> 
     <div class="box-inner-center"> 
      <ul> 
       <li> 
        <p> 
         <a href="http://***?attachment_id=150" rel="attachment wp-att-150"> 
          <img class="alignnone wp-image-150" alt="Venice Symphony Orchestra" src="http://***/Venice-Symphony-Orchestra.jpg" width="960" height="640"> 
         </a> 
        </p> 
        <p><span style="color: #000000;"><b><i>Some sample text.</i></b></span></p> 
        <p><span style="color: #000000;"><b>By Someone</b></span></p> 
        <p><span style="color: #000000;">Some quote and more content</span></p> 
        <p><span style="color: #000000;"><a href="http://***?p=141#more-141" class="more-link">(more…)</a></span></p> 
       </li> 
      </ul> 
      <a class="more" href="http://***/?cat=20">More Music 101 &gt;&gt;</a> 
     </div> 
    </div>

我一直在使用document.getElementById("box-center").childNodes和document.getElementByTagName("img")然后for遍历结果并设置属性有试过，但上述线路返回任何结果someho W上。

如果可能，我宁愿不使用JQuery或任何其他库。

谢谢你的时间。

来源

2012-12-31 SnareChops

你为什么不能使用像'.box-center img {...}'这样更通用的CSS选择器而不是ID的任何原因？ –

@JosephMarikle我如何清空身高？ '高度：无;'？ – SnareChops

啊！这很容易。你可以使用'height：auto'。看到我的答案。 –

我看不出有任何理由，你为什么不能用css来调整内部元素<IMG>的第一次出现。我建议是这样的：

.box-center .box-inner-center img { 
    width:150px; /* or whatever */ 
    height:auto; /* overrides the set HTML height*/ 
}

这将覆盖宽度和图像本身height属性，你甚至可以根据需要更具体：无论你想.box-center .box-inner-center ul p > a img或。

来源

2012-12-31 22:10:09

完美。这工作很好，我甚至想到了这一点，但我认为''的本地'width'和'height'属性会覆盖CSS ...现在我发现它不会。谢谢。 – SnareChops

@SnareChops不客气。乐意效劳。 :) –

这是假设你想带班“盒子内中心”

var thebox = document.getElementsByClassName('box-inner-center')[0]; 
var theimg = thebox.getElementsByTagName('img')[0]; 
theimg.style.width = '100px';

来源

2012-12-31 22:05:03 lostsource

按比例调整图像在运行前我无法访问

回答

相关问题