未加星标

Images placed within responsive circles

字体大小 | |
[开发(php) 所属分类 开发(php) | 发布者 店小二04 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏
The Problem

I am trying to place images within a responsive circle (div), which is itself the child of another responsive circle.

I feel I have the divs nailed, but as soon as I include an image the proportions get distorted and I can't figure out the correct CSS code.

The two divs are for a future border effect I am planning.

What I currently have...

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

The solution to my issue is to use the CSS Background property for the class .circle (see comments, cheers for the help there!!).

I have a number of news stories each with their own image placed in aphp array - I plan to use a database but for the time being an array will suffice - therefore the img src will change depending on which news story is loaded.

I was going to use:

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

Now I have to use the CSS Background property, how would I parse the PHP into the HTML/CSS??

I'm new to this, apologies if I haven't been clear...

Problem courtesy of: Sam Holguin

Solution

First of all you can make your images a basic circle I said by following 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; }

But for your use, make a foreach loop in your PHP like this to be able to apply CSS directly to it (given the images in the array are stored like <img src="www.mysrc.com/kittens.jpg" /> . If they are just the URL you have to change the echo line in the foreach loop a little)

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

And then you can apply the CSS with

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

Editbased on my chat with you. Set up the PHP this way first (has to be outside of <script> tags)

<?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"); ?>

And call it by converting it to json and putting it in <script> tags to be applied to the element.

javascript fix(no 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"}, {} ];

Solution courtesy of: Zach Saucier

Discussion

@Zeaklous I have tried your method, but I believe in this instance I have to use CSS Background-Image: url();

Therefore I need a method of dynamically changing the Background-Image: url(); and after a little searching it seems following this technique using background-image:url('<?php echo $url ?>'); would work?!?

It's a stab in the dark though, my 1st time with code of this nature.

Discussion courtesy of: Sam Holguin

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.

Discussion courtesy of: Nobita

This recipe can be found in it's original form on Stack Over Flow .

本文开发(php)相关术语:php代码审计工具 php开发工程师 移动开发者大会 移动互联网开发 web开发工程师 软件开发流程 软件开发工程师

代码区博客精选文章
分页:12
转载请注明
本文标题:Images placed within responsive circles
本站链接:https://www.codesec.net/view/611116.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 开发(php) | 评论(0) | 阅读(96)