I'm working on a page where a lot of images are being presented in a grid. I am using the Foundation grid for this. I have three types of sizes: landscape, portrait and square. In the design, the landscape and portrait blocks are exactly the same size(just turned 90deg). And that's where the problem begins..
I rather not use pixels to setup the dimensions of my images here, so is there a clean way I can make the sizes of 'landscape' and 'portrait' the same without using pixels?
Here is my HTML:
<div class="products">
<div class="product landscape medium-12 large-8 xlarge-6 columns overview">
<img src="img/mes_liggend.jpg">
<h4>Title</h4>
<p>Subtitle is longer</p>
</div>
<div class="product portrait medium-12 large-8 xlarge-6 columns overview">
<img src="img/mes_staand2.jpg">
<h4>Title</h4>
<p>Subtitle is longer</p>
</div>
<div class="product square medium-12 large-8 xlarge-6 columns overview">
<img src="img/gude5.jpg">
<h4>Title</h4>
<p>Subtitle is longer</p>
</div>
Can't be done without some reference size. You can try some CSS like this:
.products img {
width: 100%;
height: auto;
max-height: 100rem;
}
But your portrait images will narrow up (look squashed).
Related
I am building a website for the first time. I have a basic question regarding how the pages appear on different devices.
I have a row of three , which each contain an image, e.g.:
<div class="img_box"><img src="1.png" class="prod_img" border=0 height = 343 width = 298/>
<div class="img_box"><img src="2.png" class="prod_img" border=0 height = 343 width = 298/>
<div class="img_box"><img src="3.png" class="prod_img" border=0 height = 343 width = 298/>
As you can see, the three images are each 298px wide. When I view on my laptop, all three fit on one row. When I look on other machines, sometimes the third image is on a new row.
This makes sense to me, as I guess that the screen resolution on the other machines is lower or something.
My question: what is the correct way to ensure that all three images remain in one row when viewed on a computer? I understand that each image would probably have to be on a row of its own when viewed on a cellphone. There must be a standard way to deal with this. Do I give the width of the objects in % instead of pixels?
Any help is appreciated.
This is happening because you're using images of fixed size rather than using a percentage which allows them to resize allowed by the CSS and the device used to view the web page.
Currently your images width total is 896px and this excludes any padding that you may have added in the CSS. Therefore devices or windows smaller than this number will result in multiple line breaks. To overcome the issue as previous mentioned you want to use percentages.
Below is an example demonstrating how you can adopt width in precentage instead of width in pixels.
/* CSS */
.image-container {
width: 100%;
padding: 0;
margin: 0 auto;
}
.image-container img {
padding: 4px;
width: 100%;
float: right;
}
.image-container.two img {
width: 50%;
}
.image-container.three img {
width: 33.33%;
}
.image-container.four img {
width: 25%;
}
<!-- HTML -->
<!-- 1 image -->
<div class="image-container">
<img src="1.png" alt="Image Description 1">
</div>
<!-- 2 images -->
<div class="image-container two">
<img src="1.png" alt="Image Description 1">
<img src="2.png" alt="Image Description 2">
</div>
<!-- 3 images -->
<div class="image-container three">
<img src="1.png" alt="Image Description 1">
<img src="2.png" alt="Image Description 2">
<img src="3.png" alt="Image Description 3">
</div>
<!-- 4 images -->
<div class="image-container four">
<img src="1.png" alt="Image Description 1">
<img src="2.png" alt="Image Description 2">
<img src="3.png" alt="Image Description 3">
<img src="4.png" alt="Image Description 4">
</div>
I am creating a horizontal list of images with descriptions that scale with browser height. The descriptions are fixed-width and the images preserve their aspect ratio. Here's my code:
HTML
<main>
<ol id="projects">
<li class="project">
<div class="preview"><img src="http://placehold.it/40x40" /></div>
<div class="desc"></div>
</li><li class="project">
<div class="preview"><img src="http://placehold.it/40x40" /></div>
<div class="desc"></div>
</li><li class="project">
<div class="preview"><img src="http://placehold.it/40x40" /></div>
<div class="desc"></div>
</li><li class="project">
<div class="preview"><img src="http://placehold.it/40x40" /></div>
<div class="desc"></div>
</li>
</ol>
</main>
CSS
html,body,main,#projects{
height:100%;
}
#projects {
width:1000px;
float:left;
overflow:visible;
white-space:nowrap;
}
.project {
height:100%;
display:inline-block;
}
.desc{
background-color:#afa;
float:right;
width:10em;
height:100%;
}
.preview{
float:left;
height:100%;
width:auto;
}
.preview img{
height:100%;
min-width:10px;
}
Here's the JSFiddle
When the page is first loaded, the images behave as desired. However, as soon as the viewport is resized vertically, they lose their aspect ratio. However, if one reloads the page with the new viewport dimensions, the images behave correctly again. See the GIF:
Is this my error, a browser error, or some combination of the two? Is there an alternative way to achieve my goal?
I followed the answers to try to achieve a similar look to be found here www.thexxcorporation.com
The first header is using a shortcode (its a Wordpress site).
My problem is that the shortcodes don't reflect their actual styling setting, therefore, I'm trying to reproduce the look, but with my own sizes, images etc.
I've tried this:
h1:after
{
background:url(image path);/* apply your image here */
background-repeat:repeat-x;
content:" ";
position:absolute;
width:999em;
height:25px;
margin:10px 0 0 5px;
}
This, almost works, but has a problem. The style relates to headers that are with a content div. My other hears fit within the div fine (100% of the width of the div).
The above code results in the background image overflowing outside the content div it sits within.
So, how do I constrain it to the width of the div it sits within?
My page code looks like this:
<div id="main-content" class="clearfix">
<header id="page-heading">
<div class="boxed">
<h1>Test</h1>
</div><!-- /boxed -->
</header><!-- /page-heading -->
<div id="home-content" class="clearfix boxed container">
<article id="post" class="clearfix">
<div class="entry clearfix fitvids">
<h1>Test page for H1</h1>
</div><!-- .entry .clearfix -->
</article><!-- #post -->
<aside id="sidebar">
</aside><!-- /sidebar --></div><!-- #home-content -->
<div class="clear"></div>
The containing divs are set with position:relative.
If I add position:relative to the h1:after - the background image disappears.
slightly baffled.
Cheers,
Mike
the div it sits within should in relative position. add this style to the div
position:relative;
and the h1::after should have 100 percent width - don't use em. change the width to
width:100%;
hope this helps
cheers
I have this image http://s23.postimg.org/on361znhn/Transform_Marketing.png
and I want to put 3 colored and centered (learn more) texts under each image. I tried this:
<p>
<span style="float:left;margin-left:100px;margin-right:40px"> Learn More</span>
<span style="float:left;margin-left:170px;margin-right:40px"> Learn More</span>
<span style="float:left;margin-left:120px;margin-right:40px"> Learn More</span>
</p>
but the link is not working. I want an option to change (learn more) text colour and font size and have it centered under each image.
Thank you for help.
to center each text below its image, the below code should help:
<div style="text-align:center; margin-right:5px; margin-left:5px;">
<img src="img1.png"><br />learn more
</div>
<div style="text-align:center; margin-right:5px; margin-left:5px;">
<img src="img2.png"><br />learn more
</div>
<div style="text-align:center; margin-right:5px; margin-left:5px;">
<img src="img3.png"><br />learn more
</div>
Hope it helps.
Update (in case only one image):
You have to know the image width, adjust the text positions below the image using photoshop (you should use the same font & size you are using on the website).
Adjust the margins of your spans to center the text manually.
I am using twitter bootstrap.
<img id="profileImage"
data-src="holder.js/300x200" src="${picurls}">
Now the problem is when i upload a image the img area changes to the uploaded image size.
I want a fix image area and every image showld adjust within that box.
There is something wrong in it, please try following block of code
Add line into your img tag.
style="width: 300px; height: 200px;
<ul class="thumbnails">
<li class="span4">
<img id="profileImage" data-src="holder.js/300x200" src="${picurls}">
</li>
...
</ul>
Twitter bootstrap uses the 12 columns grid, so the span4 is telling that the image has 4/12 of the width of the page (or the container it's in).