I found many topics but I still have yet to find solution for my issue. When using image src from lorempixel, my code works well but when using image local (4000x3000), it not resizing to fit the div. Hope anyone can help me.
I'm using Bootstrap 3.1.1
HTML
<section class="portfolio">
<div class="portfolio-list">
<ul>
<li>
<div class="portfolio-box">
<a href="#">
<img src="img/thumb-1.jpg" alt="Portfolio item">
</a>
</div>
</li>
<li>
<div class="portfolio-box">
<a href="#">
<img src="http://lorempixel.com/598/386/" alt="Portfolio item">
</a>
</div>
</li>
<li>
<div class="portfolio-box">
<a href="#">
<img src="http://lorempixel.com/598/386/" alt="Portfolio item">
</a>
</div>
</li>
<li>
<div class="portfolio-box">
<a href="#">
<img src="http://lorempixel.com/598/386/" alt="Portfolio item">
</a>
</div>
</li>
<li>
<div class="portfolio-box">
<a href="#">
<img src="http://lorempixel.com/598/386/" alt="Portfolio item">
</a>
</div>
</li>
<li>
<div class="portfolio-box">
<a href="#">
<img src="http://lorempixel.com/598/386/" alt="Portfolio item">
</a>
</div>
</li>
</ul>
</div> <!-- end portfolio-list -->
</section> <!-- end portfolio -->
CSS
.portfolio-list{
background-color: #cccccc;
li{
float: left;
width: 33.33%;
display: block;
}
}
http://jsfiddle.net/2mbsb16m/
You should be setting the images immediate parent elements width and height. Then you can set the image to width:100%: height:auto;
.portfolio-box {
width:300px;
height:300px;
}
.portfolio-box img {
width:100%;
height:auto;
}
Updated fiddle: http://jsfiddle.net/donnellyjoe/2mbsb16m/2/
Related
HTML
<div class="button">
<a href="#">
<img id="img1" src="icons/onas1.svg" alt="O nas[enter image description here][1]">
</>
<a href="#">
<img id="img2" src="icons/kontakt1.svg" alt="kontakt">
</a>
</div>
</div>
CSS:
div.button img{
position: fixed;
height: 10%;
display: inline-block;
}
Hey, how can I put these two images next to each other?
Try this code:
div a img{
height: 10%;
width:200px;
}
<div class="button">
<a href="#">
<img id="img1" src="https://yt3.ggpht.com/-3N3L1JNdZ4k/AAAAAAAAAAI/AAAAAAAAAAA/PmHzBEEHaU4/s900-c-k-no-mo-rj-c0xffffff/photo.jpg" alt="O nas[enter image description here][1]">
</>
<a href="#">
<img id="img2" src="https://yt3.ggpht.com/-3N3L1JNdZ4k/AAAAAAAAAAI/AAAAAAAAAAA/PmHzBEEHaU4/s900-c-k-no-mo-rj-c0xffffff/photo.jpg" alt="kontakt">
</a>
</div>
</div>
I am trying to create a footer with 2 Images who link to a page.
The two links / Images shall stay on the right side of the footer.
The Images shall stand next to each other with a Little margin.
How to I manage this with css?
<footer>
<a href="http://www.google.de/" target="_blank">
<img src="test.jpg" alt="logo.jpg">
</a>
<a href="http://www.google.de" target="_blank">
<img src="test.jpg" alt="logo.jpg">
</a>
</footer>
Wrap them in a div and float it.
CSS:
.images-container {
float: right;
}
.images-container a {
margin-left: 5px;
}
HTML:
<footer>
<div class="images-container">
<a href="http://www.google.de/" target="_blank">
<img src="test.jpg" alt="logo.jpg">
</a>
<a href="http://www.google.de" target="_blank">
<img src="test.jpg" alt="logo.jpg">
</a>
</div>
</footer>
hi if you are using bootstrap framework try this code
html
<footer class="clearfix">
<ul class="links pull-right">
<li> <a href="http://www.google.de/" target="_blank">
<img src="test.jpg" alt="logo.jpg">
</a>
</li>
<li>
<a href="http://www.google.de" target="_blank">
<img src="test.jpg" alt="logo.jpg">
</a>
</li>
</ul>
</footer>
css
.links
{
list-style-type:none;
padding:0;
}
.links li
{
display:inline-block;
}
You can use float:right for your hyperlinks
footer a {
float:right;
}
footer a:first-child {
margin-left: 10px;
}
<footer>
<a href="http://www.google.de/" target="_blank">
<img src="http://placehold.it/50" alt="logo.jpg">
</a>
<a href="http://www.google.de" target="_blank">
<img src="http://placehold.it/50" alt="logo.jpg">
</a>
</footer>
I have been trying to do an image gallery for my portfolio but I want them images without borders and next to each other both horizontally and Vertically. Unfortunately All my attempts have been unsuccessful.
.portfolio {
height: 1250px;
width: 80%;
margin: 0 auto;
background-color: #CF9;
}
#thumbs {
width: 20%;
height: 50px;
color: #090;
float: left;
font-size: 0px;
}
<div class="portfolio">
<div id="thumbs">
<a href="http">
<img src="thumb.png">
</a>
</div>
<div id="thumbs">
<a href="http">
<img src="thumb.png">
</a>
</div>
<div id="thumbs">
<a href="http">
<img src="thumb.png">
</a>
</div>
<div id="thumbs">
<a href="http">
<img src="thumb.png">
</a>
</div>
<div id="thumbs">
<a href="http">
<img src="thumb.png">
</a>
</div>
<div id="thumbs">
<a href="http">
<img src="thumb.png">
</a>
</div>
<div id="thumbs">
<a href="http">
<img src="thumb.png">
</a>
</div>
<div id="thumbs">
<a href="http">
<img src="thumb.png">
</a>
</div>
<div id="thumbs">
<a href="http">
<img src="thumb.png">
</a>
</div>
<div id="thumbs">
<a href="http">
<img src="thumb.png">
</a>
</div>
</div>
http://www.adhemas.com/ is kind of what I'm trying to achieve, except my images are all the same size (although I would not mind a how to make them different sizes but still stacked)
Element IDs should be unique within your entire document. If you have more than one element with the same ID, your HTML is invalid, which is likely to cause your web page to stop working as intended.
Source: Can multiple different HTML elements have the same ID if they're different types?
I suggest you use classes instead, which support having multiple elements with the same class.
Give all your elements a class of thumbs instead of an id. Then you can use .thumbs instead of #thumbs in your CSS rule to style your elements.
First thing to fix is the id. You cannot reuse the id in the html.
Next you need to set the a and the img to be constrained inside the .thumb element.
Something like the following
.portfolio {
height: 1250px;
width: 80%;
margin: 0 auto;
background-color: #CF9;
}
.thumbs {
width: 20%;
color: #090;
float: left;
font-size: 0px;
}
.thumbs a {display:block;}
.thumbs img{width:100%;}
<div class="portfolio">
<div class="thumbs">
<a href="http">
<img src="http://lorempixel.com/500/500/cats/1">
</a>
</div>
<div class="thumbs">
<a href="http">
<img src="http://lorempixel.com/500/500/cats/2">
</a>
</div>
<div class="thumbs">
<a href="http">
<img src="http://lorempixel.com/500/500/cats/3">
</a>
</div>
<div class="thumbs">
<a href="http">
<img src="http://lorempixel.com/500/500/cats/4">
</a>
</div>
<div class="thumbs">
<a href="http">
<img src="http://lorempixel.com/500/500/cats/5">
</a>
</div>
<div class="thumbs">
<a href="http">
<img src="http://lorempixel.com/500/500/cats/6">
</a>
</div>
<div class="thumbs">
<a href="http">
<img src="http://lorempixel.com/500/500/cats/7">
</a>
</div>
<div class="thumbs">
<a href="http">
<img src="http://lorempixel.com/500/500/cats/8">
</a>
</div>
<div class="thumbs">
<a href="http">
<img src="http://lorempixel.com/500/500/cats/9">
</a>
</div>
<div class="thumbs">
<a href="http">
<img src="http://lorempixel.com/500/500/cats/10">
</a>
</div>
</div>
Removing the <div> tags completely and setting the <img> CLASS (don't use ID's more than once) to thumbs stacks the images nicely next to each other with no margins (thanks to your left float). Unless there's a reason to keep the <div>'s I suggest removing them as they're just in the way, they're also block elements which goes against the inline layout you're after.
I have some images:
<div class="builder-item-content row">
<div class="twelve columns b0">
<ul class="upcoming-events">
<li>
<a href="http://www.padi.com/scuba/" target="_blank">
<img src="assets/images/padi_logo.png" alt="" style="text-align:center">
</a>
</li>
<li>
<a href="http://www.sssnetwork.com/" target="_blank">
<img src="assets/images/sss_logo.png" alt="">
</a>
</li>
<li>
<a href="http://www.scubapro.com/" target="_blank">
<img src="assets/images/scubapro02.png" alt="">
</a>
</li>
</ul>
</div>
I want to center them inside the container. How I can do this?
Without really testing this I think after class you have
<ul class="upcoming-events" style="Width:800px; Margin:0 auto;">
This should work with the div as well. Width can be whatever you would want it to be... I just put 800px. The important part is margin:0 auto;
div.builder-item-content.row {
text-align: center;
}
Since images are inline-level, they can be centered with text-align (even tho they aren't text).
I am using the plugin Glide.js on my frontpage, and I have build it up almost like shown on the plugin page. This also means that I wish my slider images to have 100% width, but at the same time I want them to be cropped/cut off at the bottom at the window. Precisely like it is don on the plugin page.
My html code looks like this:
<header class='header'>
<div class='header-wrapper'>
<img class='header-logo' src='/assets/glide-logo-cfe0cb95a81b55ff1e872b0c578c527d.png'>
<nav class='header_nav'>
<ul class='header_nav-wrapper'>
<li class='header_nav-item'>
<a class='header_nav-item-a' href='#' id='aboutOpen'>About us</a>
</li>
<li class='header_nav-item'>
<a class='header_nav-item-a' href='#'>Create account</a>
</li>
<li class='header_nav-item'>
<form>
<button class='header_nav-item-a header_nav-item-a--btn header_nav-item-a--donate' src='https://www.paypalobjects.com/en_US/i/btn/'>Login</button>
</form>
</li>
</ul>
</nav>
</img>
</div>
</header>
<div class='slider'>
<div class='slides'>
<div class='slide content_article content_article--fast'>
<center>
<img class='slider-img' src='/assets/bg-fast-219ed63d5978022b88ba2389b4f673b6.jpg'>
<div class='content_article-wrapper'>
<h1 class='content_article-h'>Title 1</h1>
<p class='content_article-p'>
Sub title 1
</p>
<div class='content_article-btns'>
<a class='content_article-btn header_nav-item-a header_nav-item-a--btn' href='#'>
<span class='entypo-download'></span>
Read more 1
</a>
<a class='content_article-btn header_nav-item-a header_nav-item-a--btn' href='#'>See examples 1</a>
</div>
<img class='content_article-img box-shadow animated fadeOutDownBig' src='/assets/fast-img-3d905c8a57b66ef354467a9a0a07d168.png'>
</div>
</center>
</div>
<div class='slide content_article content_article--simple'>
<center>
<img class='slider-img' src='/assets/bg-responsive-07aefbc31666790f38a6e3e3b46f67a8.jpg'>
<div class='content_article-wrapper'>
<h1 class='content_article-h'>Title 2</h1>
<p class='content_article-p'>
Sub title 2
</p>
<div class='content_article-btns'>
<a class='content_article-btn header_nav-item-a header_nav-item-a--btn' href='#'>
<span class='entypo-download'></span>
Read more 2
</a>
<a class='content_article-btn header_nav-item-a header_nav-item-a--btn' href='#'>See examples 2</a>
</div>
<img class='content_article-img box-shadow animated fadeOutDownBig' src='/assets/responsive-img-662aaea9b8453dc6eac46064fdcc7a56.png'>
</div>
</center>
</div>
<div class='slide content_article content_article--responsive'>
<center>
<img class='slider-img' src='/assets/bg-simple-2d45eb663c4c69d72f66c19eb0cce285.jpg'>
<div class='content_article-wrapper'>
<h1 class='content_article-h'>Title 3</h1>
<p class='content_article-p'>
Sub title 3
</p>
<div class='content_article-btns'>
<a class='content_article-btn header_nav-item-a header_nav-item-a--btn' href='#'>
<span class='entypo-download'></span>
Read more 3
</a>
<a class='content_article-btn header_nav-item-a header_nav-item-a--btn' href='#'>See examples 3</a>
</div>
<img class='content_article-img box-shadow animated fadeOutDownBig' src='/assets/simple-img-af275d5091063498174655c95fa41079.png'>
</div>
</center>
</div>
</div>
</div>
My css is very simple, but only handles the 100% width stretch:
.slider-img {
width: 100%;
}
So how do I cut off my slider images so they fit the height of the screen?
Here is the CSS
.crop{
float:left;
margin:.5em 10px .5em 0;
overflow:hidden; /* this is important */
border:1px solid #ccc;
}
/* input values to crop the image */
.crop img{
margin:-20px -15px -40px -55px;
}