I have some divs set up to display images as links with and im trying to set up a standardized way to place an image in the div and at LEAST have it stretch the image to fit for me. I would really like to be able to adjust the cropping to fit in the square, but i realize that may be a bit tricky.
Heres what i currently have:
(tried to post image but dont have the rep just yet so heres a link http://i.stack.imgur.com/nNRD9.jpg
How would i go about doing this? I thought that using
style="height:100%; width:100%"
would work, but it still didnt stretch the photo to the maximum height, possibly due to how i have things layed out.
In the photo above, each photo is set up like:
<div class="4u 12u$(mobile)">
<article class="item">
<img src="images/resume.jpg" title="My Resume" alt="My Resume" />
<header>
<h3>My Resume</h3>
</header>
Thanks!!
A fiddle (http://jsfiddle.net/), and a pen (http://codepen.io/), are great ways to present what you are trying to do for other people. You can put your HTML, CSS, and JS, and it will render it for you, for free. Check them out.
You can use display: table, display: table-row, and display: table-cell on the div container, <div>, and the <article> respectively.
Another great solution is using a flexbox, Css Tricks have a great guide on it.
If you are interested in grids and frameworks I will suggest that you check out “Foundation”, or “Bootstrap” or the myriad of other HTML5 frameworks.
Put your code in a fiddle, so we will be able to help you out with your code. Until then, here is a suggestion
a{width:auto; display:inline-block; min-height:100px; overflow:hidden;}
img{width:100%;}
Overflow:hidden; will hide the parts of the <img/> that lies outside the bounds of <a>
Specifying width and height to .item class might fix it.
Please post the css style you have done so far so that we can look into it and suggest changes to achieve your requirement.
Related
I'm currently in a web design class to learn to code, but I have been struggling with a code and cannot figure it out for the life of me.
I have my portfolio website I'm currently working on and cannot figure out how to get the background color of my main section to go all the way to the page. If you look in the attached screenshot, my main section won't go to the bottom of the page. I have tried height: 100% and height: 100vh with no luck.
Photo of problem:
Coding is to much to post because I'm not even sure what could be causing it...however, the website link is here if you could look at the page source:
http://cherylju.com/com6338/p1_Ju_Cheryl/about.html
Any help would be amazing! I've been trying to figure this out for hours now.
Wrap you sections side by side inside a div and give it the property display:flex
<div style="display: flex;">
<section class="secondary-page"></section>
<aside class="resume"></aside>
</div>
Doing it you 'll notice inmediate changes (including what you are looking for) but the order of the sections will be changed... Then, You can get rid of float that it's not at all the best option for your goals... specially if badly used (you don't use float right to an element and float left to the other... both need same direction).
More about flex here
(Note, we are still new to web development, and I have only just joined the team to help and therefore don't know the exacts of the html code)
I've attempted to look on stackoverflow for similar questions, but not of the people have the exact same issue. I am attempting to help a team out with their web development. One issue they are having is the the images won't remain within their respective bubbles (see image) when a user zooms in or out. Here is the website: http://2016.igem.org/Team:Rice
Here is an example of some of the markup that is responsible for the images:
<div>
<img src="http://2016.igem.org/wiki/images/e/ed/Bubble_background.png"
style="float:center;position:relative;left:50%">
<img id = bubble
src="http://2016.igem.org/wiki/images/f/fd/Sub_bubble_12.png" width= 72px
style ="position:absolute;left:64.1%;top:35.3%">
</div>
The first picture is the Purple bubble, and it would be ideal to have the "bubble" images to be within the burble circles; and it would be nice if they would stay in the circles, regardless of zooming or differences in resolution.
What I've tried:
I've tried to change the position attributes but this didn't seem to do much. I've also tried to change the percentages to pixels. While this worked by keeping the images still while I zoomed in and out, the pictures still were screwed when I checked on another computer with a different resolution.
I ended up changing the div element to be position: absolute
<div sytle = "position: absolute">
<img src="http://2016.igem.org/wiki/images/e/ed/Bubble_background.png"
style="float:center;position:relative;left:50%">
<img id = bubble
src="http://2016.igem.org/wiki/images/f/fd/Sub_bubble_12.png" width= 72px
style ="position:absolute;left:64.1%;top:35.3%">
</div>
So far this seems to do the trick
You need to use position:absolute on the background image.
I'm creating a website and have a problem with the way it displays in different browsers. I'm testing using Chrome, iOS and IE8. The site displays correctly in the first two, but not so in IE.
The website in question is http://www.edalemill.co.uk/
Can anyone help point out what's wrong with my CSS to solve the problem?
Thanks!
I have taken a look and can replicate the issue.
I would suggest removing the
overflow:auto; from the #stripper
You have also used body more then once as well in your CSS, I would suggest having only one lot and tidying up your code.
Possibly consider using this as a base which should help you:
http://meyerweb.com/eric/tools/css/reset/
UPDATE
Otherwise for your code do the following for the CSS
#sidebar {
position:fixed;
}
I would recommend making that IE8 code only though
If you take out the height:100% on #container the background image fills up the rest of the text area for the about page.
Let me know if this helped.
Update
It might just be easier to have another CSS tag for the content areas that scroll. The height:100% works on those content areas that don't scroll, however, they break on those that do. My recommendation, even though it might not be the best way, is to either make a second CSS tag for the content areas that scroll, or just simply make the image bigger.
I'm trying to understand this webpage:
http://www.canadianliving.com/food/slow_cooker_beef_stew.php
It is divided into several sections where each section has a border around it. For example, to the right of the title "Slow-Cooker Beef Stew" is an image "tested till perfect". Immediately to the right of this is a border, which separates it from an advertisement. This border extends down and separates the section from the "Related Content" section below.
But what is making the border? I am using Chrome's Inspect Element, Computed Style, but none of the tags seem to have a border-style. What else can create a border?
(I'm not looking for the best way to make a border; I need to understand how other pages do it.)
EDIT:
Based on people's answers, I tried the html below, which is not working. I don't get how an image in a parent div is repeated in each child div in such a way that it fits exactly along the border.
<div style = "float:left;background-image:url('http://www.canadianliving.com/media/images/background_02.png?201206051535');background-clip:border-box;background-origin:padding-box;background-repeat:repeat-y;" >
<div style = "float:left;width:300px;background-clip:border-box;background-origin:padding-box;padding-left:8px">hello</div>
<div style = "float:left;width:300px;background-clip:border-box;background-origin:padding-box;padding-left:8px">there</div>
</div>
http://www.canadianliving.com/media/images/background_02.png?201206051535
Its an image, not a border, remove the image to get rid of the 'border'.
I deduced this by selecting the container element and reviewing the css background property,
for future reference.
Here an example:
<style>
div#test {
height:800px;
width:800px;
background:url(http://www.canadianliving.com/media/images/background_02.png?201206051535) top right repeat-y #676767;
}
</style>
<div id="test">TestDiv<div>
Keep in mind, this is a rough sketch of what it should look like. I'm not planning on learning you this without some effort. Try w3schools for an html / css tutorial.
I'm betting we all did this kind of research and a lot of trying before trying to submit to these kind of forums.
Happy coding, good luck!
D.
The background is set on the div#right_col where the ads are. They have a padding-left of 8px (width of the shadow background image) and a background set on content-container with url('/media/images/background_02.png') 0 630px repeat-y.
basically, it is a background url that is used as a shadow border. Please look at the CSS of #content_container in firebug/chrome inspect element.
It is not a border but used as a seperator.
I was using some code from this (http://webdesignerwall.com/tutorials/css-elastic-videos) site to have a nice "elastic" video container that would size with my responsive design.
I'm looking to do something similar but with images. So it resizes with the design, keeping the proportions and allow it to expand a bit outside it's current containers' margins.
I think I need to wrap the image in a div and position that somehow but I just need some advice if anyone has done something similar to this. The exact dimensions/etc are not important, just the process behind it. Thanks!
Here's an image to what I'm looking to accomplish: http://i.stack.imgur.com/84KvA.gif
How about something like this:
img {
max-width: 110%;
margin: 0 -5%;
}
Just an update, I decided to break the image out from the content, I'll add fake classes to help explain what I did...
<div class='no-longer-padded-post-element'>
<img src="now-can-span-full-width.jpg" />
<div class='content-with-padding'>
title
content
meta
etc.
</div>
</div>