I'm relatively new to coding and need your help.
Here's the codepen:
http://codepen.io/anon/pen/NdMjZy
<div class="flex-item w50 fill">
<div class="flex-inner portfolio">
<a href="">
<img src="" alt="">
</a>
</div>
</div>
What I need: Images should fill/cover the flex-item container. They should be centered and stay in aspect-ratio.
You can see that the images with the chairs are not 100% height.
I tried to use imagefill.js but that resulted in 0px height flex-items.
Thank you in advance!
You can set object-fit: cover for your img. Your a element must be a flexbox to make object-fit work.
Note that: I just add resize: both; to .flex-inner for demo only. You can resize the .flex-inner to see effect
.flex-inner {
width: 200px;
height: 200px;
resize: both;
overflow: auto;
}
.flex-inner a {
display: flex;
width: 100%;
height: 100%;
border: solid 1px #123;
}
img {
object-fit: cover;
width: 100%;
}
<div class="flex-inner">
<a href="">
<img src="http://via.placeholder.com/500x200" alt="">
</a>
</div>
All the methods mentioned here and everywhere else didn't work efficiently . I have 52 Flex boxes , aligned 13 x 4 , and inside each box , there is an image with 6 x 6 cm dimensions .
What worked for me is targeting the <a> element :
.container nav ul li a {
display: block;
border: 10px solid yellow;
border-radius: .5em;
padding: 0 0;
margin: .2em;
}
Related
I am a rookie for front-end development. Recently, I wrote codes like:
<div style="background-color:red">
<img src='https://www.logaster.com/blog/wp-content/uploads/2013/06/jpg.png'>
</div>
The height of image(logo.jpg) is 80px, but the height of div is 82px. Why?
You can show image like a block to fix that,
<div>
<img style="display:block" src='logo.jpg'>
</div>
<div style="height:your height; width:your witdh;">
<img src='logo.jpg'>
</div>
To change the height or width you can do what i did above with inline style. or give the div a class or give the div an id and style it in an external stylesheet.
You need to write proper css to achieve this.
<div class="wrap">
<div class="box1">
<img src="http://www.placekitten.com/500/500">
</div>
</div>
.box1 {
width:auto;
height: auto;
max-width: 600px;
max-height: 300px;
background-color:chocolate;
padding:5px;
display: inline-block;
}
.box1 img {
vertical-align: top;
max-width: inherit;
max-height: inherit;
}
.wrap {
border: 1px dotted gray;
margin: 1.00em 0;
text-align: center;
}
JsFiddle : https://jsfiddle.net/nikdtu/75nu1a4m/
I want to create the following layout :
Is a stripe of a variable number of images that have various widths and heights, that are:
proportional
scaled at the same height;
and the sum of their widths are equal to the parent width.
***It's kind of complicated to express myself;
I was wondering if it's possible for a block to simulate the img neat proportion behavior when you set a width to a percentage and it calculates the height of it automagically.
I've made up a diagram that maybe explain better what I want to achieve :
I want for the image to have collectively 100% width of the parent element, scaled with at the same height without loosing their proportion.
I've tried various implementations trying to figure out a way in which I can translate compute a percentage height in css that fills all the width for a block, just how the image behaves when there are {width: 100%; height : auto} properties.
So here is what I've got so far :
Strike #1, tried a simple solution
Problem: container height must be predefined.
.container {
width : 100%;
border: 1px solid black;
height: 50px; /* I would like to say here auto */
}
.image-wrapper {
white-space: nowrap;
height: 100%;
max-width: 100%;
border: 1px dashed gray;
}
.image {
height: 100%;
width: auto;
}
<div class="container">
<div class="image-wrapper">
<img class="image" src="http://placehold.it/100x200" />
<img class="image" src="http://placehold.it/300x200" />
<img class="image" src="http://placehold.it/800x400" />
<img class="image" src="http://placehold.it/10x80" />
<img class="image" src="http://placehold.it/800x400" />
</div>
</div>
Strike #2, display: table anyone ?
Problem: Don't even need to mention it, images are cropped the container size doesn't follow its parent size .
.container-wrapper {
width: 40px;
height: 50px;
}
.container {
width : 100%;
border: 1px solid black;
display: table;
height: 100%;
}
.image-wrapper {
display: table-row;
height: 100%;
border: 1px dashed gray;
}
.item {
display: table-cell;
border: 1px solid blue;
width: 100%;
height: auto;
}
.image {
height: 100%;
width: auto;
}
<div class="container-wrapper">
<div class="container">
<div class="image-wrapper">
<div class="item">
<img class="image" src="http://placehold.it/100x200" />
</div>
<div class="item">
<img class="image" src="http://placehold.it/300x200" />
</div>
<div class="item">
<img class="image" src="http://placehold.it/800x400" />
</div>
<div class="item">
<img class="image" src="http://placehold.it/10x80" />
</div>
<div class="item">
<img class="image" src="http://placehold.it/800x400" />
</div>
</div>
</div>
</div>
***I must say that I am looking for a HTML/CSS solution without the involvement of JavaScript code.
Do you have a clue on how can I approach this ?
So a trick I just came up with is to use the automagic scaling of an image to scale the containing filmstrip div, but hide it with opacity (in a real example, I'd use a transparent .png as well). This sets the height of the filmstrip relative to its width. If you want your filmstrip to be 5:4 or 16:9 or whatever, just change the proportions of the .magic image.
The container inside is then set to be absolutely positioned so it inherits the size of the .magic image.
The images themselves are set to take up the full height of the filmstrip, and are given different widths. The actual image is set with background-image which uses background-size: cover and background-position: center to fill the div.
.filmstrip {
width: 100%;
position: relative;
/* just to make it easier to see what's going on */
border: 1px solid red;
}
.magic {
width: 100%;
height: auto;
display: block;
/* we don't actually want to see this, we're just using it for it's ratio */
opacity: 0;
}
.contents {
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
}
.contents .image {
height: 100%;
background-size: cover;
background-position: center;
float: left;
margin-right: 2%;
/* just to make it easier to see what's going on */
border: 1px solid blue;
box-sizing: border-box;
}
.contents .wide {
width: 30%;
}
.contents .narrow {
width: 10%
}
<div class="filmstrip">
<img class="magic" src="http://placehold.it/400x100" />
<div class="contents">
<div class="wide image" style="background-image: url('http://placehold.it/300x100');"></div>
<div class="narrow image" style="background-image: url('http://placehold.it/300x100');"></div>
<div class="wide image" style="background-image: url('http://placehold.it/300x100');"></div>
</div>
</div>
Browser support should be: Chrome 3+, Firefox 3.6+, IE 9+, Opera 10+, Safari 4.1+ which is basically because of the use of background-cover.
Have a look at my stackoverflow 33117027 answer in which I made suggestions about creating a filmstrip. It has a reference to an eleborate Codepen example. You can easily strip/add what you need...
I have a header with a div which have display:table; max-width: 800px. It should act as a frame to restrict the contents width. Inside the frame are images which auto-scale and are nested inside div's with display:table-cell.
Everything is working on Chrome and Mobile Safari, but Firefox and IE are not restricting the frame width.
jsFiddle
Can anybody help me, please ;(
Set the table to have table-layout: fixed and a width of 100%.
.frame {
display: table;
max-width: 800px;
width: 100%;
height: 300px;
margin: 0 auto;
padding: 10px;
background: #ccc;
table-layout: fixed
}
.item {
display: table-cell;
vertical-align: middle;
padding: 0 5px;
}
img {
max-width: 100%;
height: auto;
}
<div class="frame">
<div class="item">
<img src="http://lorempixel.com/250/250" />
</div>
<div class="item">
<img src="http://lorempixel.com/250/200" />
</div>
<div class="item">
<img src="http://lorempixel.com/250/100" />
</div>
</div>
Check this Fiddle
Replace max-width to width from image css, the reason behind this is max-width does not apply to inline elements, so you will get inconsistent behavior across browsers.
img {
width: 100%;
height: auto;
}
I have a container and would like to resize the height of this container according to the size of the image inside.
HTML:
<figure class="container">
<a class = "123">
<img class="item" src="...">
</a>
</figure>
CSS:
.container {
position: relative;
min-width: 100%;
margin: 0 -10px 10px
}
.item {
width: 100%;
border-radius: 3px
}
Does anybody have an idea how I should go about this?
The following might do the trick, use display: inline-block for the figure container and get rid of the extra white space after the image with display: block.
The inline-block will give you a shrink-to-fit height and width around the image (and link in your case).
.container {
border: 1px dotted blue; /* for demo only */
display: inline-block;
}
.container img {
display: block;
}
<figure class="container">
<a class = "123">
<img class="item" src="http://placehold.it/200x100">
</a>
</figure>
<figure class="container">
<a class = "123">
<img class="item" src="...">
</a>
</figure>
.container {
position: relative;
min-width: 100%;
margin: 0 -10px 10px
height: auto;
overflow: auto;
}
.item {
width: 100%;
border-radius: 3px
}
The container will wrap itself around the image and adjust accordingly.
before you call the container you call which image you are going to use within the container, get the width and height of the image , now you know what you are going to use it so you can do inline styleing.
<?php
$img = "your image url comes here";
list($width, $height) = getimagesize($img);
echo"
<figure class='container' style='width:$width;height:$height'>
<a class = '123'>
<img class='item' src='$img'>
</a>
</figure>
";
?>
I was not successful CSS. Should be in the center of the picture (different size) in the div. See an example:
And examples of html and css - http://jsfiddle.net/KJXUt/
HTML:
<div class="box">
<a href="#" class="pic">
<img src="http://pics.posternazakaz.ru/pnz/product/small_x2/97/61/ccc0980cde08f9032cd665f7104aca10.jpg" alt="" width="300" height="130" />
</a>
</div>
<div class="box">
<a href="#" class="pic">
<img src="http://www.22.ru/ow_userfiles/plugins/photo/photo_preview_137.jpg" alt="" width="140" height="140" />
</a>
</div>
CSS:
body {
background: #D6E8FF;
}
.box {
border: #555 1px solid;
margin-right: 10px;
width: 100px;
height: 100px;
overflow: hidden;
display: table-cell; /* <-- problem */
vertical-align: middle; /* <-- problem */
}
img {
max-width: 100px;
height: auto;
}
How to correct style? Help, please. Thanks in advance
The term to make a picture smaller without re-sizing it is called "cropping", to directly achieve your answer, a different css property: background will be used. And the div's will be removed. #Heliio's method is great if you need <div> tags.
A code sample is as following
HTML:
<a href="#" class="pic pic1">
</a>
CSS:
.pic {
display:inline-block;
border: #555 1px solid;
margin-right: 10px;
width: 100px;
height: 100px;
}
.pic1{
background: transparent url(http://mw2.google.com/mw-panoramio/photos/medium/62256112.jpg) -20px -200px no-repeat;
}
Note that the css has some negative values, these are extremely tedious to modify, but it's really just -((imagewidth-100)/2) x -((imageheight-100)/2)
http://jsfiddle.net/KJXUt/9/
When you use display: table-cell; it's forcing to fixed size to the cells. Maybe it's not a good solution.
I dont understand, if want really it, but:
body {
background: #D6E8FF;
}
.box {
border: #555 1px solid;
float:left;
width: 100px;
height: 100px;
overflow: hidden;
}
img {
max-width: 100px;
}
Example here: http://jsfiddle.net/KJXUt/1/
Or, if prefer: http://jsfiddle.net/KJXUt/3/
This is a simple technique to center the image vertically in .box
http://codepen.io/AntonNiklasson/pen/pkaov
To add more boxes next to eachother, add float: left to .box