问题

Question

问题

我正在尝试将图像放在响应圈（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;
}

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

我有一些新闻故事，每个故事都有自己的图像放在PHP数组中 - 我打算使用数据库，但目前数组就足够了 - 因此img src会根据哪些新闻而改变故事已经加载。

我打算用：

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

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

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

Answer 1

因此，如果您尝试在圆形图像上实现某种3D效果，您只能使用图像标记来获取它，这样代码就会非常干净，并且很容易通过PHP放置图像。

只需为图像指定一个100％的边框半径和一个合适的盒子阴影，就像这样：

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

看看这个http://codepen.io/nobitagit/pen/trEuJ

由于代码很简单，因此很容易使其响应友好。

Answer 2

首先，您可以按照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 like this中创建一个foreach循环，以便能够直接将CSS应用于它（假设数组中的图像存储为<img src="www.mysrc.com/kittens.jpg" />。如果它们只是您必须稍微更改foreach循环中的回显线的URL

<?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"},
    {}
];

Answer 3

@Zeaklous我尝试过你的方法，但我相信在这个例子中我必须使用CSS Background-Image: url();

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

虽然这是在黑暗中刺伤，我第一次使用这种性质的代码。

放置在响应圈内的图像

问题

我目前拥有的......

3 个答案: