将 img 替换为 php 的背景图像 div

php html css

2022-08-30 21:30:24

有没有办法用如下所示的div标签替换img标签？

原始 html：

<div class="article">
  <img src="/images/img-1.jpg" alt="alt for image">
</div>

替换的 html：

<div class="article">
 <div style="background: transparent url(/images/img-1.jpg) no-repeat;
 background-position: center center; background-size: cover; width: 566px; 
 height: 576px;">alt for image</div>
</div>

（可选）另外，是否可以在我的示例中使用父 div（即文章类）的宽度和高度，而不是定义固定？width: 566px; height: 576px;

如果可能的话，我想使用这个函数。str_replace

str_replace('?????', '?????', $article);

编辑：

类文章可能有多个元素，文章类 div 中可能还有其他元素，我需要从中将 img 更改为 div。

编辑2：

我的意思是好像我可以在文章div中拥有任何内容，只是想用div替换img。

我可能有：

<div class="article">
  <h1>heading</h1>
  <p>paragraph</p>
  <img src="/images/img-1.jpg" alt="alt for image">
</div>

或者我可能有：

<div class="article">
  <h3>heading</h3>
  <p><img src="/images/img-1.jpg" alt="alt for image"> some paragraph </p>
</div>

因此，我可能在div中有任何内容，并且我想从中将img替换为div，例如.article

从：

<img src="/images/img-1.jpg" alt="alt for image" here-may-be-another-attribute-too>

自：

<div style="background: transparent url(/images/img-1.jpg) no-repeat;">alt for image</div>

答案 1

您可以使用PHP的本机DOM库来查找和替换html。我写了一些例子，你适应你的情况。希望有所帮助。

更新代码：

$html_str = '<div class="article newclass" id="some_id">
  <h1>heading</h1>
  <p>paragraph</p>
  <img src="images/image.png" alt="alt for image">
  <br>
  <h3>
  <p>paragraph</p>
    <img src="images/image2.png" alt="alt for image3">
  </h3>
  </div>';

$dom = new DOMDocument();
$dom->loadHTML($html_str);
$xpath = new DOMXpath($dom);

foreach ($xpath->query('//div[contains(@class, "article")]//img') as $img) {

  $new_img = replace($img, $width = '566', $height = '576');

  $replacement = $dom->createDocumentFragment();
  $replacement->appendXML($new_img);

  $img->parentNode->replaceChild($replacement, $img);

}

$new_html = $dom->saveXml();
echo $new_html;

function replace($img, $width, $height) {

  $href = $img->getAttribute('src');
  $alt = $img->getAttribute('alt');

  $new_img = '<div style="background: transparent url('.$href.') no-repeat;
    background-position: center center; background-size: cover; width: '.$width.'px;
    height: '.$height.'px;">'.$alt.'</div>';

  return $new_img;
}

替换函数保持不变，仅更改使用 DOM 进行管理的部分

答案 2

使用php-class simplehtmldom（http://simplehtmldom.sourceforge.net/），你可以找到并修改HTML-Dom与CSS类似的选择器。

<?php
require_once('simple_html_dom.php');

// Create DOM from string
$html = str_get_html('<div class="article">
  <img src="/images/img-1.jpg" alt="alt for image">
</div>');

$html->find('div.article', 0)->innertext = '<div style="background: transparent url(/images/img-1.jpg) no-repeat;
 background-position: center center; background-size: cover; width: 566px; 
 height: 576px;">alt for image</div>';

/** 
 * Output: <div id="article"><div style="background: transparent url(/images/img-1.jpg) no-repeat;
 * background-position: center center; background-size: cover; width: 566px; 
 * height: 576px;">alt for image</div></div>
 */
echo $html; 
?>