I have one issue.
Images have different size.
I need to arrange in the middle of vertical.
The link of Images is changed dynamically.
And I don't wish to use line-height.
Is there a best and popular way to fix this issue?
You can use CSS Flexbox. Make your parent a flex container & in your image use align-self: center.
.img-holder {
display: inline-flex;
background: black;
}
img {
align-self: center;
margin: 10px;
}
<div class="img-holder">
<img src="http://placehold.it/50x50" alt="image" />
<img src="http://placehold.it/50x60" alt="image" />
<img src="http://placehold.it/50x70" alt="image" />
<img src="http://placehold.it/50x30" alt="image" />
<img src="http://placehold.it/50x20" alt="image" />
</div>
Hope this helps!
Related
I have a layout that has a lot of images and in order to make my layout responsive, I am using percentage values for the width and height. Each image is nested into a div tag and the images are given a width and height of 100% of their parent's width and height.
Using media queries, depending on the screen size, I am changing the width of the divs that contain each images as follows:
When only 2 images can fit on the screen: 50% width each div that contains an image
When only 3 images can fit on the screen: 33.33% width each div that contains an image
When only 4 images can fit on the screen: 25% width each div that contains an image
When only 5 images can fit on the screen: 20% width each div that contains an image
etc..
But those images look pixelated when they get bigger, they loose quality... How do I make them not loose quality and not look pixelated when they go from having a 20% width to having a 50% width?
Do I use the srcset technique? What responsive image technique do I use to allow my images to scale to any size without getting pixelated?
If I understand correctly flex-grow will do the job for you.
Whenever you have 1 image it will force it to be 100% width, 2 images 50% and so on and so forth. You don't need a media query for this, unless you want to achieve different layouts per your wish, of course.
Here is an example on codepen, you can try adding/removing images to see how it fits.
.flexbox .item {
flex-grow: 1;
}
.flexbox {
display: flex;
border: 2px solid #86835f;
margin-bottom: 2em;
max-width: 100%;
}
.item {
box-sizing: border-box;
background: #86835f;
color: #ece69c;
margin: 0.25em;
}
img{
max-width: 100%;
}
<div class="flexbox flexbox-grow-1">
<div class="item ">
<img src="https://fox26medford.com/wp-content/uploads/2020/04/AprilShoe-720x399-1.jpg" alt=""/>
</div>
<div class="item ">
<img src="https://fox26medford.com/wp-content/uploads/2020/04/AprilShoe-720x399-1.jpg" alt=""/>
</div>
<div class="item ">
<img src="https://fox26medford.com/wp-content/uploads/2020/04/AprilShoe-720x399-1.jpg" alt=""/>
</div>
<div class="item ">
<img src="https://fox26medford.com/wp-content/uploads/2020/04/AprilShoe-720x399-1.jpg" alt=""/>
</div>
<div class="item ">
<img src="https://fox26medford.com/wp-content/uploads/2020/04/AprilShoe-720x399-1.jpg" alt=""/>
</div>
</div>
If you want to retain the original sizes of the images and make it responsive, there is a cool way to do this!
-> You can use a flexbox. (That is the secret)
Run the following code below and open the code in full screen. Then change your screen width by minimizing the screen and watch how responsive the images are using flexbox.
The magic down below is caused by a CSS property known as flex-wrap: wrap; Which will wrap all the images in a responsive container!
You can make something like this:-
.image {
height: auto;
width: 150px;
margin: 10px;
}
.container {
display: flex;
flex-wrap: wrap;
}
<div class="container">
<img class="image" src="https://www.befunky.com/images/wp/wp-2014-08-milky-way-1023340_1280.jpg?auto=webp&format=jpg&width=1184" />
<img class="image" src="https://www.befunky.com/images/wp/wp-2014-08-milky-way-1023340_1280.jpg?auto=webp&format=jpg&width=1184" />
<img class="image" src="https://www.befunky.com/images/wp/wp-2014-08-milky-way-1023340_1280.jpg?auto=webp&format=jpg&width=1184" />
<img class="image" src="https://www.befunky.com/images/wp/wp-2014-08-milky-way-1023340_1280.jpg?auto=webp&format=jpg&width=1184" />
<img class="image" src="https://www.befunky.com/images/wp/wp-2014-08-milky-way-1023340_1280.jpg?auto=webp&format=jpg&width=1184" />
<img class="image" src="https://www.befunky.com/images/wp/wp-2014-08-milky-way-1023340_1280.jpg?auto=webp&format=jpg&width=1184" />
</div>
If you resize the image they will align and be responsive!
I'm creating a row with a number of images of a specific height and width in HTML and CSS. An example of what I'm doing can be seen here on Imgur.
Each image is simply an <img> tag floated to the left to remove whitespace and overall, it works successfully. However, when the browser is minimised, the end image disappears due to there being inadequate space to display it. An example of this can be seen on the above Imgur link.
Is there a way, in CSS, to crop the overflow so that a cropped version of the image (while maintaining the same height) is shown rather than no image?
Update: My code, at present, is as follows:
<div class="userbar">
<a href="#">
<img src="img.jpg" alt="Image">
</a>
... and so on, about 60 times
</div>
CSS (written in SASS then compiled):
.userbar {
max-height: 64px;
}
.userbar a {
float: left;
}
.userbar a img {
display: inline-block;
height: 64px;
width: 64px;
}
Use a container to wrap your images and make the container flex and hide the overflow-x. Is this you're looking for?
.image-container {
width: 100%;
display: flex;
overflow-x: hidden;
}
<div class="image-container">
<img src="https://unsplash.it/200/200/?random" />
<img src="https://unsplash.it/200/200/?random" />
<img src="https://unsplash.it/200/200/?random" />
<img src="https://unsplash.it/200/200/?random" />
<img src="https://unsplash.it/200/200/?random" />
<img src="https://unsplash.it/200/200/?random" />
<img src="https://unsplash.it/200/200/?random" />
<img src="https://unsplash.it/200/200/?random" />
<img src="https://unsplash.it/200/200/?random" />
</div>
I'm using mvc5 with razor viewengine and bootstrap
I want became some images centered , when I use Boostrap.css center not working but when I delete bootstrap.css it works fine . I used bootsrtap text center class but it doesn't work too :/
http://jsfiddle.net/9h5rvgLc/
There is an another way to do that:
Include class="center-block" in the image as follows:
<img .. class="img-responsive center-block" src="http://images.all-free-download.com/images/graphiclarge/daisy_pollen_flower_220533.jpg" />
Check Fiddle:
https://jsfiddle.net/9h5rvgLc/5/
use .img-responsive{ margin:0px auto} may it works for you
Try adding display: block; margin: 10px auto to the style attribute. That will center the div the image. I have updated the jsfiddle for demo, link.
<div>
<div style="margin-top: 10px; padding-right: 0px; padding-left: 0px;" class="col-sm-12 col-md-6 col-lg-4">
<a href="#">
<img style="display: block; margin: 10px auto; width:450px ; height:390px;" class="img-responsive" src="http://images.all-free-download.com/images/graphiclarge/daisy_pollen_flower_220533.jpg" />
</a>
<h3 class="h">#item.GoodTitle</h3>
<h5 class="h">#item.GoodSubText</h5>
</div>
</div>
Ps. Would also change the height from height: 390px to height: auto to avoid the image stretching.
Change your image tag to this:
<img style="width:450px ; height:390px; display: inline" class="img-responsive" src="http://images.all-free-download.com/images/graphiclarge/daisy_pollen_flower_220533.jpg" />
Notice I added: display: inline
I have a 3 column grid, which is sitting inside a 100% container div. But as of now it is just being pulled all the way to the left side of the page. I want the three columns to be div to be centered inside the container. Here is a screenshot of the design that I'm trying to code: To fix the margin issue between each grid box, I used the technique found here (Scroll down to the last section "Roll your own...")
HTML:
<div class="featured-properties">
<div class="properties">
<div class="property">
<img src="img/sample-prop-1.jpg" alt="Sample Property" />
</div>
<div class="property">
<img src="img/sample-prop-2.jpg" alt="Sample Property" />
</div>
<div class="property">
<img src="img/sample-prop-3.jpg" alt="Sample Property" />
</div>
<div class="property">
<img src="img/sample-prop-4.jpg" alt="Sample Property" />
</div>
<div class="property">
<img src="img/sample-prop-5.jpg" alt="Sample Property" />
</div>
<div class="property">
<img src="img/sample-prop-6.jpg" alt="Sample Property" />
</div>
</div><!-- end .properties -->
</div><!-- end .featured-properties -->
CSS:
.featured-properties {
width: 100%;
}
.properties {
margin: -79px;
overflow: hidden;
clear: both;
width: 1047px;
}
.property {
float: left;
margin-left: 79px;
}
No need explanation, see the CSS below and demo (responsive!).
DEMO: http://jsfiddle.net/0m5p2818/
.properties {
text-align: center;
max-width: 720px; /* (200+(20x2))x3 */
font-size: 0; /* fix for white space bug */
margin-left: auto;
margin-right: auto;
}
.property {
display: inline-block;
margin: 20px;
font-size: 16px;
}
I'm not really sure if I understood your question, but I think CSS 3 Flexbox can help you to achieve what I think you need.
Take a look at it here and see if it works for you: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I've looked at other questions asking similar things, but the answers for them don't seem to work for my problem. I have a website that contains two divs on either side of a news slider, which is also in a div. The side divs are both floating to their respective sides. The problem is, when I make the window smaller, they (adLeft and adRight) overlap the center sliderDiv and go behind it. I've tried various things like making a min-width, overflow be hidden, or changing padding and margins, but I never see any difference. Any help would be greatly appreciated!
Here's the website: http://thehummingbirdplace.com/
Here's the relevant html:
<div id="adLeft">
<a href="http://www.amazon.com/Kathleen-Ball/e/B007QNUTC8/ref=ntt_athr_dp_pel_1/" target="_blank">
<img src="_images/advertisements/autumn.png" width="200" height="300" alt="Autumn's Hope" />
</a>
<br><br>
<a href="http://www.romancestorytime.com/" target="_blank">
<img src="_images/advertisements/loveCowboy.png" width="200" height="300" alt="For the Love of a Cowboy" />
</a>
</div>
<div class="clear">
</div>
<div id="adRight">
<a href="http://www.jeanjoachimbooks.com/" target="_blank">
<img src="_images/advertisements/lovesLastChance.png" width="200" height="300" alt="Love's Last Chance" />
</a>
<br><br>
<a href="http://www.jeanjoachimbooks.com/" target="_blank">
<img src="_images/advertisements/loversLiars.png" width="200" height="300" alt="Lovers and Liars" />
</a>
</div>
<div class="clear">
</div>
<div class="sliderDiv" id="slider">
<img src="_images/podcast/123013_slider.png" width="851" height="323" alt="Later in Life Romances" />
<img src="_images/podcast/122313_slider.png" width="851" height="323" alt="Christmas Contemporary Romances" />
<img src="_images/podcast/121613_slider.png" width="851" height="323" alt="Christmas Historicals" />
<img src="_images/podcast/120913_slider.png" width="851" height="323" alt="Christmas Novellas" />
<img src="_images/podcast/archive_slider.png" width="851" height="323" alt="Archive" />
</div>
And here is the css that applies to it:
#adLeft {
width: 200px;
margin-right: 50px;
float: left;
margin-left: 20px;
}
#adRight {
width: 200px;
margin-left: 50px;
float: right;
margin-right: 20px;
}
.clear {
float: clear;
}
.sliderDiv {
margin-right: auto;
margin-left: auto;
width: 851px;
position: relative;
z-index: 1;
margin-top: -48px;
}
I believe you were on the right track with using min-width, as you can use it on the body of the page to prevent it from scaling down to the point of overlap.
Adding:
body {
min-width: 1400px;
}
to your styles should do the trick. The min-width needs to be applied to body because that's the overall container which everything else is inheriting width from, and positioning against.
Alternatively, if you do not want your page to get cut off once the screen gets smaller than that minimum width, you can use media queries to hide or move the left and right side images so that they are no longer in a position to cause overlap.
A media query is used like so:
#media only screen
and (max-width: 1400px){
#adLeft, #adRight {
/* Some sort of styles here */
}
}
I hope that helps, let me know if you have any questions,
Cheers!