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
Related
I'm trying to build a website and to do so I followed this html code and this css code; this guy created a grid of 12 cool images with logos and animations, but they're not linkable. What I would like to do is to make them linkable and to do so I created this code but it's giving me weird stuff; any help please?
<div class="portfolio-items-wrapper">
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(Immagini/Crypto.jpg)">
<img src="Immagini/Crypto.jpg">
</div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="Immagini/Logo/Bitcoin.png">
</div>
</div>
</div>
</div>
I'd suggest not making the images background images if you want to make them into links. Try this:
<div class="portfolio-img">
<img src="Immagini/Crypto.jpg">
</div>
And the CSS:
.portfolio-img {
height: 350px;
width: 100%;
}
Check this solution
.click-img {
position: relative;
display: block;
}
<a class="click-img" href="#" title="Clickable background image">
<img src="https://picsum.photos/seed/picsum/300/300" alt="Your Image">
</a>
I have several different images all with a different height/width. I want them all to have the same height and keep their aspect ratio so I figured in the css width should be equal to auto. How can I achieve that all my images have the same height but keep responsiveness?
I wrote the following code containing the images:
<div class="container container-margin">
<div class="columns">
<div class="column is-one-third">
<div class="card">
<div class="card-image">
<figure class="image">
<img class="bw-filter" src="/images/battleport.png"/>
</figure>
</div>
<div class="card-content remove-padding-left">
<div class="content">
<h6 class="">Battleport</h6>
<p><i>Study</i></p>
<br>
</div>
</div>
</div>
</div>
<div class="column is-one-third">
<div class="card">
<div class="card-image">
<figure class="image">
<img class="bw-filter" src="/images/crmfabriek.png"/>
</figure>
</div>
<div class="card-content remove-padding-left">
<div class="content">
<h6 class="">CRM Fabriek</h6>
<p><i>Business</i></p>
<br>
</div>
</div>
</div>
</div>
<div class="column is-one-thrid">
</div>
</div>
Besides that I've looked at the following topics
How to keep responsive images same height?
How can I make all images of different height and width the same via CSS?
Unfortenately the solutions in the topics won't work for my code. Could anyone help me out?
Not sure if this is what you are looking for, but might be the fix.
div{
width: 100%;
text-align: center;
}
img{
max-width:100%;
max-height: 300px;
}
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png" alt="">
</div>
I think the best option would be to use these images as background images and then set the background-size to either "contain" or "cover". This way you can set the container width/height to the appropriate size based on the media query.
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>
As the title says, how do I center two divs next to each other perfectly?
My HTML: (or well, a bit of it)
<section class="team" id="team">
<div class="container">
<h3>The team behind CatCraft</h3>
<div class="divider">
<div class="hr">
<div class="hr-dot"></div>
</div>
</div>
<div class="row row-centered">
<div class="team-centered col-md-4">
<img src="http://cravatar.eu/helmhead/6a940db5e02d4bf79db9203a8b126f0d/140.png" alt="catx">
<h4 class="bold">CatX (Owner)</h4>
<p>Hi! I'm CatX and I'm the owner of CatCraft. I like anime and tech stuff. My favourite server is bending. =^_^=</p>
</div>
<div class="team-centered col-md-4">
<img src="http://cravatar.eu/helmhead/ef4fbdb6d629480d8f98ed9919c111e9/140.png" alt="__ast__">
<h4 class="bold">__Ast__ (Co-Owner)</h4>
<p>Example text, pls write something ;-;</p>
</div>
</div>
</div>
</section>
My CSS: (same here, this isn't all)
I tried to make a box for the css above too but it didn't work. http://pastebin.com/SzhAmh3f
Basically the problem I'm having is that the code above works kind of but one of the blocks are a little bit lower than the other and i have no idea why.
Yes, I know that there are other posts about this subject but no one worked for me so I decided to open my own.
There are a lot of unwanted styles actually to achieve this, you simply need the below code on your team-centered class. Remove row-centered class. It should look like this
CSS
.team img {
width: 140px;
height: 140px;
border-radius: 50%;
margin: 10px auto 40px;
}
.team-centered {
width: 50%;
float:left;
text-align: center;
}
HTML
<section class="team" id="team">
<div class="container">
<h3>The team behind CatCraft</h3>
<div class="divider">
<div class="hr">
<div class="hr-dot"></div>
</div>
</div>
<div class="row">
<div class="team-centered">
<img src="http://cravatar.eu/helmhead/6a940db5e02d4bf79db9203a8b126f0d/140.png" alt="catx">
<h4 class="bold">CatX (Owner)</h4>
<p>Hi! I'm CatX and I'm the owner of CatCraft. I like anime and tech stuff. My favourite server is bending. =^_^=</p>
</div>
<div class="team-centered">
<img src="http://cravatar.eu/helmhead/ef4fbdb6d629480d8f98ed9919c111e9/140.png" alt="__ast__">
<h4 class="bold">__Ast__ (Co-Owner)</h4>
<p>Example text, pls write something ;-;</p>
</div>
</div>
</div>
</section>
I recently asked a question that a is kind of related to this but I still need some help. Now that I have that part done, I would like to know how I can make this images fit the size of the browser within their respective divs. Therefore the page would just be the 3 images side by side, no scroll up or down. I thought that having a "container fluid class would help me in this respect but it hasn't. I don't care about the quality of the images in terms because I will be using very hi-def photos, but if there is anything that I should keep in mind in this respect please feel free to notify me. Here is the code so far:
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<img class="img-responsive" src="http://www.bandanaworld.com/20108.JPG" alt="img">
</div>
<div class="col-md-4">
<img class="img-responsive" src="http://www.wholesaleforeveryone.com/content/images/blank/600/solid_color.gif" alt="img">
</div>
<div class="col-md-4">
<img class="img-responsive" src="http://sdihousing.com/wp-content/uploads/2011/09/Solid-Colors-Spectrum-Blue.png" alt="img">
</div>
</div>
</div>
You can add some classes to your html :
<div class="imageContainer container-fluid">
<div class="row">
<div class="ImageColumn col-md-4">
<img class="img-responsive" src="http://www.bandanaworld.com/20108.JPG" alt="img">
</div>
<div class="ImageColumn col-md-4">
<img class="img-responsive" src="http://www.wholesaleforeveryone.com/content/images/blank/600/solid_color.gif" alt="img">
</div>
<div class="ImageColumn col-md-4">
<img class="img-responsive" src="http://sdihousing.com/wp-content/uploads/2011/09/Solid-Colors-Spectrum-Blue.png" alt="img">
</div>
</div>
And some css:
.imageContainer {
height:100%;
position:fixed;
}
.imageContainer .row, .imageContainer .ImageColumn {
height:100%;
padding:0;
}
.imageContainer .ImageColumn img {
width:100%;
height:100%;
}
here is the Fiddle
But I must warn you the result with real photos can look bad because of image stretch: Example
UPD:
as suggested in comments - you can change class to col-xs-4 so it would behave the same on all devices.
UPD 2:
I added something similar like Ihover square effect 4 but without rotation.
It required quite a change in css transitions.
Here is the example:
Link