html - 放置在响应圈内的图像

Question

问题

我试图将图像放在一个响应圈 (div) 中，它本身是另一个响应圈的子项。

我觉得我已经确定了 div，但是一旦我包含图像，比例就会扭曲，我无法找出正确的 CSS 代码。

这两个 div 用于我计划的 future 边框效果。

我目前拥有的...

CodePen

HTML

<section class="col-4">
  <div class="wrapper">
    <div class="outta-circle">  
      <div class="circle">
        <!-- <img src="#"> -->
      </div>
    </div>
  </div>

  <div class="wrapper">         
    <div class="outta-circle">  
      <div class="circle">
        <!-- <img src="#"> -->
      </div>
    </div>
  </div>
</section>

CSS

.col-4 {
  width: 1068px;
}

.wrapper {
    width: 48.68%;
    max-height: 520px;
    background-color: white;
}

.outta-circle {
    width: 100%;
    height: auto;
  margin: 80px auto;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background-color: red;
}

.circle {
    width: 96.15%;
    height: auto;
    padding-bottom: 96.15%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background-color: blue;
  overflow: hidden;
}

我的问题的解决方案是使用 .circle 类的 CSS Background 属性(查看评论，为那里的帮助欢呼!!)。

我有很多新闻报道，每个新闻报道都有自己的图片，放在一个 PHP 数组中 - 我打算使用数据库，但目前一个数组就足够了 - 因此 img src 会改变取决于加载的新闻报道。

我打算使用:

<img src="<?php echo $article["img"]; ?>" alt="<?php echo $article["title"]; ?>">

现在我必须使用 CSS Background 属性，我该如何将 PHP 解析为 HTML/CSS？？

我是新手，如果我没说清楚，请见谅......

Answer 1

首先你可以让你的图片成为一个基本的圆圈，我说的是关注 this tutorial

.circular {
    width: 300px;
    height: 300px;
    border-radius: 150px;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    background: url(http://link-to-your/image.jpg) no-repeat;
    }

但为了您的使用，请在您的 PHP 中创建一个 foreach 循环 like this能够直接将 CSS 应用于它(假定数组中的图像存储为 <img src="www.mysrc.com/kittens.jpg" /> 。如果它们只是 URL，您必须稍微更改 foreach 循环中的回显行)

<?php

   $cont=0;
   echo '<ul>';
   foreach($array as $arrval){
       echo '<li class="circular">'.$arrval.'</li>';   
       $cont++;
   }
   echo "</ul>";
   ?>

然后你可以应用 CSS

li.circular{
        width: 300px;
    height: 300px;
    border-radius: 150px;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
}

编辑 根据我与您的聊天记录。首先以这种方式设置 PHP(必须在 <script> 标签之外)

<?php
$array1 = array('img' => "http://izview.com/wordpress/wp-content/uploads/2008/07/the-chandelier.jpg",
               'title' => 'article',
               'content' => 'This is the content coming from PHP',
               'date' => "6/27/2013");
?>

并通过将其转换为json并将其放入<script>中来调用它应用于元素的标签。

Javascript 修复(无 PHP)jsFiddle

var articleArray = [{img: "http://izview.com/wordpress/wp-content/uploads/2008/07/the-chandelier.jpg", title: "Article Name", content: "This is the content coming from PHP", date: "6/27/2013"},
    {}
];