2

问题

我正在尝试将图像放置在一个响应圈（div）中，它本身就是另一个响应圈的孩子。

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

这两个 div 用于我计划的未来边界效果。

我目前拥有的...

代码笔

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;
}

我的问题的解决方案是使用该类的 CSS Background 属性.circle（请参阅评论，为那里的帮助欢呼！！）。

我有许多新闻故事，每个新闻故事都有自己的图像放置在 PHP 数组中 - 我计划使用数据库，但暂时一个数组就足够了 - 因此img src将根据加载的新闻故事而改变。

我打算使用：

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

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

我是新手，如果我不清楚，请道歉......

4

3 回答 3

2

So if you're trying to achieve a sort of 3d effect on a rounded image you can definitely get it with just the image tag only so the code will be very clean and it will be easy to place the image through PHP.

Simply assign a 100% border-radius and a proper box-shadow to the image, something along these lines:

 img {
  border-radius: 100%;
  box-shadow: 9px 0 red;
 }

Take a look at this http://codepen.io/nobitagit/pen/trEuJ

As the code is this simple it will be very easy to make it responsive-friendly as to your needs.

于 2013-06-27T10:06:23.020 回答
2

首先，您可以按照本教程使您的图像成为我所说的基本圆圈

.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 循环，以便能够直接将 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"},
    {}
];
于 2013-06-27T12:23:34.487 回答
1

@Zeaklous我试过你的方法，但我相信在这种情况下我必须使用CSSBackground-Image: url();

因此，我需要一种动态更改的方法，Background-Image: url();经过一番搜索后，使用这种技术似乎background-image:url('<?php echo $url ?>');可行？！？

不过，这是我第一次使用这种性质的代码。

于 2013-06-27T13:10:12.960 回答