It's an know issue that "with fluidly sized images, before the images load, the image containers initially appear collapsed."
I've fixed the issue for banner image and product images adding div and using this css hack:
height: 0;
overflow: hidden;
padding-bottom: 66.6%;
position: relative;
But can't understand how to fix it for awards icons block.
Firstly image containers initially appear collapsed, than it's loading one big icon, than 2nd, than resize them - would like it to know correct sizes before hand so it will look smooth to the eye.
Here is the screen recording of the issue
Here is pen for award icons block > https://codepen.io/anon/pen/borJXK
HTML
<div class="awards-memberships-container" data-modal="#awards-memberships-modal">
<div class="awards-memberships">
<div class="item">
<img src="http://via.placeholder.com/188x132"/>
</div>
<div class="item">
<img src="http://via.placeholder.com/146x146"/>
</div>
<div class="item">
<img src="http://via.placeholder.com/204x133"/>
</div>
</div>
</div>
CSS
img{vertical-align:bottom;}
body section img{max-width:100%;height:auto;}
.awards-memberships-container{background:#FFF;border-bottom:1px solid #ccc;cursor:pointer;}
.awards-memberships{display:flex;padding:5px 15px;}
.awards-memberships .item{padding:0px 10px;}
Try this and tell me how it goes.
body section img {max-width:100%;height:auto;}
.awards-memberships-container {background:#FFF;border-bottom:1px solid #ccc;cursor:pointer;}
.awards-memberships {display:flex;justify-content:center;align-items:center;padding:5px 15px;}
.awards-memberships .item {padding:0px 10px;}
.awards-memberships .item img {display:block;width:auto;height:auto;max-width:100%;}
<div class="awards-memberships-container" data-modal="#awards-memberships-modal">
<div class="awards-memberships">
<div class="item">
<img src="http://via.placeholder.com/188x132" alt="img1">
</div>
<div class="item">
<img src="http://via.placeholder.com/146x146" alt="img2">
</div>
<div class="item">
<img src="http://via.placeholder.com/204x133" alt="img3">
</div>
</div>
</div>
Related
I'm trying to use Bootstrap grid system with rows each has 4 column contains image, but the image size is big and it gets over its container, so I set image position: absolute and div position: relative but it still doesn't work. Is there any way to make the image fit the div container with container's size?
.sec5row {
border: 1px solid red;
position: relative;
}
.filter {
position: absolute;
}
<div class="container">
<div class="row">
<div class="col-md-3 sec5row">
<img class="filter" src="https://placehold.it/40" alt="f1">
</div>
<div class="col-md-3 sec5row">
<img class="filter" src="https://placehold.it/40" alt="f1">
</div>
<div class="col-md-3 sec5row">
<img class="filter" src="https://placehold.it/40" alt="f1">
</div>
<div class="col-md-3 sec5row">
<img class="filter" src="https://placehold.it/40" alt="f1">
</div>
</div>
<div>
You can use the below code to fit image inside the responsive div
.filter {
width:100%;/*To occupy image full width of the container and also fit inside the container*/
max-width:100%/*To fit inside the container alone with natural size of the image ,Use either of these width or max-width based on your need*/
height:auto;
}
I think the bootstrap class ".img-responsive" solves your problem. So try something like this:
<div class="container">
<div class="row">
<div class="col-md-3">
<img class="img-responsive" src="resources/images/f1.jpg" alt="f1">
</div>
<div class="col-md-3">
<img class="img-responsive" src="resources/images/f2.jpg" alt="f1">
</div>
<div class="col-md-3">
<img class="img-responsive" src="resources/images/f3.jpg" alt="f1">
</div>
<div class="col-md-3">
<img class="img-responsive" src="resources/images/f4.jpg" alt="f1">
</div>
</div>
<div>
It sets the style of your image to "max-width: 100%;" and "height: auto;" which should be exactly what you need. There should be no need for any additional css.
Add css to your code
#img {
width: 100px;//change px size
height: 100px;//change px size
padding-left: 3px;
padding-top: 5px;
}
Just add class="img-responsive" to your img tag...it works fine
So I'm pretty new to HTML/CSS and I'm doing this lesson from CodeAcademy and I'm trying to replicate this: https://s3.amazonaws.com/codecademy-content/projects/junction/index.html
The problem is that I'm not being able to make those images in the middle look bigger, they're very small, and I have no idea how to resize them.
Here's my version: https://jsfiddle.net/eb3roj0j/1/
<!--supporting-->
<div class="supporting">
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="https://goo.gl/HuNcSi" class="img-responsive" alt="">
<h2>Read</h2>
<p>Discover new stories and follow your favorite writers.</p>
</div>
<div class="col-md-4">
<img src="https://goo.gl/Vxo5z5" class="img-responsive" alt="">
<h2>Write</h2>
<p>Create stories about our world, or entirely new worlds.</p>
</div>
<div class="col-md-4">
<img src="https://goo.gl/93x9GD" class="img-responsive" alt="">
<h2>Talk</h2>
<p>Join the conversation by talking with your favorite readers and your fans.</p>
</div>
</div>
</div>
</div>
in your css you have:
.row img
{
position: relative;
float: left;
max-width: 35px;
max-height: 35px;
}
this is constraining your image size
I am using older Skeleton css version, it is a 16 column grid system. I am trying to setup similar layout as in this picture.
http://imgur.com/sIV2aYo
I am pretty new to CSS, is using two containers (one inside another) a proper method?
Here is a sample code of what I been trying, but not working out too well =(
<div class="container">
<div class="eight columns alpha">
<div class="image">
<img alt="" src="images/coffee.jpg">
</div>
</div>
<div class="eight columns omega">
<div class="container">
<div class="eight columns">
<img alt="" src="images/plate.jpg">
</div>
<div class="eight columns">
<img alt="" src="images/macaro.jpg">
</div>
<div class="text area">
<p class="quote">"One of my favorite parts of using Square Register is being able to talk to customers while I am swiping their cards."</p>
<p class="name">Norm Mui, Coffee Foundry</p>
</div>
</div> <!-- 2nd container -->
</div>
</div> <!-- 1st container -->
Thanks in advance.
I don't know your CSS, but maybe this helps you:
HTML:
// The class "columns" is your "block" (div) that needs the content. I've made a CSS with a background-color, height and width.
// In that div "columns we create new "columns, numbered by 1,2 and 3. I've floated all the text to the left and gived it a margin. The first, second and the third a margin of 15px ( top, right, buttom and left ).
// In the div column "columns" I have made a textarea with also a margin of 15px. The vertical-align is for a top vertical align. with the display we means that it needs to be in the block, with a margin of 40% ( it takes 40% of the block).
<div id="container">
<div class="columns">
<div class="eight-columns-1">
<img alt="" src="http://ww1.prweb.com/prfiles/2014/04/10/11752526/gI_134971_best-image-web-hosting.png">
</div>
<div class="eight-columns-2">
<img alt="" src="http://www.causingeffect.com/images/made/images/example/cow_100_100_c1.jpg">
</div>
<div class="eight-columns-3">
<img alt="" src="http://www.causingeffect.com/images/made/images/example/cow_100_100_c1.jpg">
</div>
<div class="textarea">
<p class="quote">"One of my favorite parts of using Square Register is being able to talk to customers while I am swiping their cards."</p>
<p class="name">Norm Mui, Coffee Foundry</p>
</div>
</div>
</div>
CSS:
.columns {background-color:yellow; width: 530px; height: 285px;}
.eight-columns-1 {float:left; margin: 15px;}
.eight-columns-2 {float: left; margin: 15px;}
.eight-columns-3 {float:left; margin: 15px 15px 15px 0px;}
.textarea {vertical-align:top; margin: 15px; display:inline-block; width: 40%;}
im making a container that contains 3 images and three "text bits"
My problem is that I cant seem to get the text to appear on the right side of each image.
Here a SS: http://imgur.com/ujBIjYC
The html:
<div class="textandimg">
<div class="image">
<a href="#">
<img src="img/belahotellforside.png" alt="belahotellforside">
</a>
</div>
<div class="text">
<p>asdfer</p>
</div>
<div class="image">
<a href="#">
<img src="img/caprocatforside.png" alt="caprocatforside">
</a>
</div>
<div class="text">
<p>asdfer</p>
</div>
<div class="image">
<a href="#">
<img src="img/granhotellforside.png" alt="granhotellforside">
</a>
</div>
<div class="text">
<p>asdfer</p>
</div>
</div>
and the css:
.textandimage{
clear:both;
}
.image{
float:left;
width: 100%;
margin-left: 10px;
}
.text{
float:left;
}
If I put :
.text{
float:right;
}
The text appears on the right side. But its still inline with the picture. And I want the text to be side by side.
Appreciate any help. Thanks.
If your div with image class has setted width: 100% it take 100% of the width. So you can remove it or set to an value in "px".
Delete all that CSS and just put this:
.image{
float: left;
margin-left: 10px;
}
All you want is just to float the images to the left of the text divs, so that's all you need.
http://jsfiddle.net/M8CQD/
Edit: From your comment, it also looks like you need to put each image and text div together in a div in order to push the images down below the preceding image.
<div class='row'>
<div class="image">
<a href="#">
<img src="img/belahotellforside.png" alt="belahotellforside">
</a>
</div>
<div class="text">
<p>asdfer</p>
</div>
</div>
I'm a visual designer, so this may seem a silly question (and at one point, this wasn't broken!) but I'm stuck. I'm trying to get images to appear in a responsive row with a mouseover.
Can anyone help? I know the code is jacked; I've been struggling with the order of the divs. The mouseover is working, BUT the images are now stacking and aren't appearing in a row anymore. They're outside of the col-lg-4 container, but I've included that. What am I missing?
*image is FPO
/// HTML:
<div class="col-lg-12">
<div class="highlight">
<h3>LOREM IMPSUM DOLAR</h3>
<h5>The fox and the rabbit.</h5>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<figure class="cap-left">
<div class="thumbnail">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/T_Roosevelt.jpg/473px-T_Roosevelt.jpg" alt="">
<figcaptions><h4>Please let this work</h4></figcaptions>
</div>
</figure>
</div>
</div>
<div class="col-lg-4">
<figure class="cap-left">
<div class="thumbnail">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/T_Roosevelt.jpg/473px-T_Roosevelt.jpg" alt="">
<figcaptions><h4>Please let this work</h4></figcaptions>
</div>
</figure>
</div>
</div>
/// JSFiddle:
http://jsfiddle.net/zvcNa/
This is due to your padding: 30px 40px; for figcaptions{}.
figcaptions is 100% width and height, but add your padding to this size.
Remove this padding and add it to your figcaptions children :
figcaptions h4{
padding:30px;
}
FIDDLE
EDIT #1:
Replaced :
figure {
display: block;
position: relative;
}
.col-lg-4 {
display:block;
float:left;
}
FIDDLE