Found a solution that auto centered my icons (horizontally & vertically) within the container.
But now when viewport is smartphone size, the icons resize very small and the container resizes too large.
<section id="icon">
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 col-xs-offset-3">
<img class="img-responsive" alt="github" src="http://image.flaticon.com/icons/svg/25/25231.svg">
</div>
<div class="col-xs-2">
<img alt="stackoverflow" src="http://ryangarant.com/stacko.png">
</div>
<div class="col-xs-2">
<img alt="linkedin" src="http://image.flaticon.com/icons/svg/145/145807.svg">
</div>
</div>
</div>
</section>
/*Icon Section*/
#icon .col-xs-2 {
background: white;
height: 100px;
}
#icon .container-fluid {
background: white;
}
#icon img {
height: 100%; width: 100%; object-fit: contain;
}
What are the best practices for keeping icons proportional within its parent container?
Using FontAwesome icons did the trick :)
http://fontawesome.io/
Related
How can I make sure that the images always are on the 'same' width and height, so they are matched in terms of those two? Now the second one is much larger and the boxes don't match up anymore. I need to get a big list with images that I got from someone, and they are not all the same dimensions sadly. The images need to be scaled proportionally
.slider-item {
width: 50%;
display:block;
float:left;
}
.slider-item img {
max-width: 100%;
}
.text {
background-color: grey;
}
<div class="slider-item">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Shaqi_jrvej.jpg/1200px-Shaqi_jrvej.jpg" alt="product">
<div class="text">
<h3>123</h3>
<h4>23</h4>
<h2>Bonte</h2>
<p>Text</p>
Order
</div>
</div>
<div class="slider-item">
<img src="https://pi.tedcdn.com/r/talkstar-assets.s3.amazonaws.com/production/playlists/playlist_398/reconnect_with_nature.jpg" alt="product">
<div class="text">
<h3>123</h3>
<h4>23</h4>
<h2>Bonte</h2>
<p>Text</p>
Order
</div>
</div>
Set a height and a width to the images. Then apply the object-fit: cover CSS rule on them.
The object-fit CSS property sets how the content of a replaced
element, such as an or , should be resized to fit its
container.
Possible values: contain, cover, fill, none, scale-down
.slider-item {
width: 50%;
display: block;
float: left;
}
.slider-item img {
width: 100%;
height: 10rem;
object-fit: cover;
}
.text {
background-color: grey;
}
<div class="slider-item">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Shaqi_jrvej.jpg/1200px-Shaqi_jrvej.jpg" alt="product">
<div class="text">
<h3>123</h3>
<h4>23</h4>
<h2>Bonte</h2>
<p>Text</p>
Order
</div>
</div>
<div class="slider-item">
<img src="https://pi.tedcdn.com/r/talkstar-assets.s3.amazonaws.com/production/playlists/playlist_398/reconnect_with_nature.jpg" alt="product">
<div class="text">
<h3>123</h3>
<h4>23</h4>
<h2>Bonte</h2>
<p>Text</p>
Order
</div>
</div>
The image is wider than the surrounding div.
This is for mobil units. The image within the div
has width:auto; and the div holding it is as wide
as the visible area. So if the div is 500px the
image might vary having 1000px or so. But I want
to show the middle part of image only.
Im using an old version of OWL Carousel v1.3.3
<div id="custom-owl-slider" class="owl-slide" data-scroll-speed="2">
<div class="item">
<img src="images/slider/IMG_3455.png" alt="">
</div>
<div class="item">
<img src="images/slider/IMG_771.JPG" alt="">
</div>
<div class="item">
<img src="images/slider/IMG_321.JPG" alt="">
</div>
<div class="item">
<img src="images/slider/IMG_344.jpeg" alt="">
</div>
<div class="item">
<img src="images/slider/IMG_563.jpeg" alt="">
</div>
<div class="item">
<img src="images/slider/IMG_135.jpeg" alt="">
</div>
</div>
Thanks!
FIXED with the following:
#custom-owl-slider .owl-item {
display: flex !important;
justify-content: center !important;
height: auto; /* or other desired height */
overflow: hidden !important;
}
#custom-owl-slider .owl-item img {
flex: none !important; /* keep aspect ratio */
}
try this for img middle
.item > img {
text-align: center;
overflow: hidden;
}
PD: if you want, this code should fit the image on the div
.item > img{
width: 100%;
}
I'd like to know, is it possible to change img dimensions while preserving its responsiveness on browser resize? Applying height and width doesn't work.
.wrap1 {
position: relative;
overflow: hidden;
}
.img1 {
height: auto;
width: 100%;
}
<div class="container-fluid">
<div class="row">
<div class="wrap1">
<img class="img1" src="http://lorempixel.com/600/400" alt="">
</div>
</div>
</div>
I created a responsive site but some of the images dont resize as I want them to.
See this screenshot:
#img1 {
width: 250px;
height: auto;
margin: auto;
display: block;
background-size: 20%;
}
<div class="row">
<div class="col-md-6" id="mision">
<img src="imagenes/MISION.png" id="img1">
</div>
<div class="col-md-6" id="vision">
<img src="imagenes/VISION.png" id="img2">
</div>
<div class="col-md-12" id="servicios">
<img src="imagenes/SERVICIOS.png" id="img3">
</div>
</div>
You're using a fixed width in the CSS for your image element, try changing to a percentage width, e.g.:
#img1{
width: 80%;
height: auto;
margin: auto;
display: block;
background-size:20%;
}
Then the width of the image should resize with your column.
The web page looks fine. However, when changing my browser window size, the content of the container is pushed up and down. Thus it either leaves a lot of container free space or just disappears (like it is under the next container).
But I would like it to always be inside the container with the same proportions.
Here is my code:
.first {
padding-left: 5%;
}
.second {
padding: 80px 50px 0px 70px;
background-size: cover;
}
.fourth {
margin-top: 7%;
}
.third {
padding-top: 80px;
padding-bottom: 65px;
height: 678px;
position: relative;
width: 100%;
min-height: auto;
overflow-y: hidden;
background: url("http://htmlcolorcodes.com/assets/images/html-color-codes-color-tutorials-hero-00e10b1f.jpg");
background-size: cover;
}
.selling-text {
font-family: Ubuntu;
font-size: 20px;
padding-top: 27%;
text-align: center;
color: black;
margin-left: 2%;
}
.second-block {
background: #F2EADC;
height: 500px;
background-image: url("http://www.planwallpaper.com/static/images/824183-green-wallpaper.jpg");
background-size: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="third container-fluid">
<div class="col-md-6">
<div class="device">
<div class="screen">
<!-- Demo image for screen mockup, you can put an image here, some HTML, an animation, video, or anything else! -->
<img src="http://happybirthdaycakeimages.com/wp-content/uploads/2015/05/Yummy-Chocolate-Birthday-Cake.jpg" class="img-responsive first" alt="">
</div>
</div>
</div>
<div class="col-md-6">
<div class="second">
<img src="http://gypsea.com.au/wp-content/uploads/2015/07/freeship.png" class="img-responsive" alt="">
<div class="fourth">
<button type="button" class="button btn-block">MENU</button>
</div>
</div>
</div>
</div>
<div class="second-block container-fluid">
<div class="col-md-6">
<div class="screen">
<p class="selling-text">
See the best cake recipes.
Trusted recipes for chocolate cake,
white cake, banana cakes,
and carrot cakes with photos and
tips from home cooks.
</p>
</div>
</div>
<div class="col-md-6 second">
<div class="videoWrapper shadow">
<iframe width="560" height="315" src="https://www.youtube.com/embed/JM_Q7HR55DY" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
I don't know why JSFiddle doesn't work with jQuery 1.11.1, it looks different from what I see connecting it locally.
Ok, I think that the problem is with the fixed height for your <div class="third container-fluid">, which has a height of 678px. To be more specific: as the columns move when you resize your window, the fixed height is becoming a problem because your container has less px than the combined height of your child elements - the col's.
Here is a JSFiddle where I have just commented out the fixed height