I am using imgix to server my images. They have a great library for serving jpegs at just the right size and pixel density. But it doesn't work when I need to add links to those images.
Here's the fiddle & the code:
jsfiddle.net/L95suygs/1/
<style>
...
.feature-img {
width:23%;
margin:0 1% .5em;
height:320px;
float:left;
overflow: hidden;
text-align: center;
overflow:hidden;
}
#media (max-width:1024px){
.feature-img {
width:48%;
margin:0 1% .5em;
}
}
#media (max-width:480px){
.header-img{
width:100%;
margin:0 0 .5em 0;
}
.feature-img {
width:100%;
margin:0 0 .5em;
height:200px;
}
}
</style>
<div class="container" id="example1">
<!-- Header Image -->
<div class="header-img">
<img class="imgix-fluid" data-src="//assets.imgix.net/examples/octopus.jpg?fit=crop&crop=faces" >
</div>
<div class="feature-img">
<img class="imgix-fluid" data-src="//assets.imgix.net/examples/jellyfish.jpg?fit=crop&crop=faces">
</div>
<div class="feature-img">
<img class="imgix-fluid" data-src="//assets.imgix.net/examples/lionfish.jpg?fit=crop&crop=faces">
</div>
<div class="feature-img">
<img class="imgix-fluid" data-src="//assets.imgix.net/examples/clownfish.jpg?fit=crop&crop=faces">
</div>
<div class="feature-img">
<img class="imgix-fluid" data-src="//assets.imgix.net/examples/fin.jpg?fit=crop&crop=faces">
</div>
</div>
<script type="text/javascript">
var options = {
updateOnResizeDown : true,
updateOnPinchZoom : true,
fitImgTagToContainerWidth: true,
fitImgTagToContainerHeight: true,
pixelStep : 10,
onChangeParamOverride: function(w, h) {
var dpr = Math.ceil(window.devicePixelRatio*10) /10;
return {"txt": "w:" + w + " h:" +h + " dpr:" + dpr,
"txtalign": "center,bottom",
"txtsize": 20,
"txtfont":"Helvetica%20Neue,bold",
"txtclr":"ffffffff",
"txtpad":20,
"txtfit":'max',
"exp":-2
}
}
};
imgix.onready(function() {
imgix.fluid(options);
});
</script>
The Short Answer
Add something like the following to your CSS:
.feature-img > a {
display: block;
width: 100%;
height: 100%;
}
This gives a definite size to your <a> tag, so its child image will be sized accordingly.
-- OR --
Change your HTML from this:
<div class="feature-img">
<img class="imgix-fluid" data-src="..." >
</div>
to this:
<a href="http://google.com" class="feature-img">
<img class="imgix-fluid" data-src="...">
</a>
This applies the .feature-img style that's already nicely defined to your <a> tag, rather than applying it to an unnecessary parent <div> and using the <a> tag as a child.
The Long Answer
Marking an image as imgix-fluid means it will always size itself to fit its container's width (and in this case height, since you're passing in fitImgTagToContainerHeight: true).
In your standard case (<img> tag wrapped in a <div>), this behaves exactly as expected. Your <div> tags size themselves properly thanks to your CSS, and imgix.js ensures that the images inside it are the proper size, because you've marked them as imgix-fluid.
However, when you wrap an image in an <a> tag as you've done with the second image in the example, the <img>'s parent container is no longer the handsomely-sized <div>, it's now an <a> with no styling applied to it whatsoever. And, because <a> is an inline element by default, it has no inherent sizing of its own--inline elements size themselves to fit their contents. The <a> sizes itself to fit the <img> inside of it (which has no src attribute, and therefore will be sized to something small but inconsistent from browser to browser), and imgix.js sizes the image inside it to be as small as its parent <a>. It's kind of a chicken-and-egg problem, but it ends in disappointment instead of continuing indefinitely.
As stated above, there are two solutions you could use:
Simply apply some styles to your <a> tag. If you set it to display:block; and set width and height to 100%, the anchor will automatically fill the space created by its parent <div> and consequently imgix.js will size the child <img> appropriately.
Ditch the parent <div> in this case and just make the <a> the container! Replacing the outer <div> with an <a> works perfectly, as long as you give the <a> the feature-img class.
For my money, the second approach seems cleaner and makes more sense.
Hope this helps!
Related
I am trying to show image from my PC in my website using html file using css. The css, the image, and the html file are in the same directory the image is shown inside the web browser inspector as shown but not showing in the page it self Inspected Element
.logo {
background: url(https://placekitten.com/100/100);
}
<div class="logo"></div>
The div has no height — there is no explicit height in CSS and there is no content in normal flow to give it a height from the height: auto it gets by default.
Since it has no height, it is 0 pixels tall. Multiply the height by the width and you get a box that is 0 square pixels.
With a canvas size of 0, there is no space to display the image on.
Do something to give it a height.
.logo {
background: url(https://placekitten.com/100/100);
}
<div class="logo">
Here is some content.
</div>
That said, a logo is something that conveys information. It isn't decorative. You should express it with HTML not CSS, and include alt text.
<div class="logo">
<img src="https://placekitten.com/100/100" alt="Kitten Inc.">
</div>
The "logo" class must have a height in order to show its contents, you have several ways to set up the height:
01
inside your css, go to '.login' and between{ } write : height:100px;
result
.logo{
height:100px
}
02
Inline like this
<div class="logo" style="height:100px"></div>
03
Using jQuery, like this
$('.logo').height(100);
or
$('.logo').css('height','100px');
I have this code
<div class="mix category-1">
<a href="img/holder-01-large.png" class="photo">
<img src="img/holder-01-small.png alt="Ram - Srbija" class="img-small-1"></a>
Primer montaze
<a class="popup-youtube" href="https://www.youtube.com/watch?v=dz1kDQEHJaU">Video primer</a>
</div>
I want to replace this holder-01-small.png when hover over it with image with same dimensions. Is that possible by not touching this HTML code, just using CSS?
Yes it's possible, but not using the approach you have presented.
Instead, create a div (using an img tag here would mean we would need a transparent image to act as a placeholder, whereas a div will just work)
<div class="image"></div>
And in css try something like the below, you will need to specify a height and a width as the div will technically be empty, otherwise it will just collapse on itself.
.image {
background-image: url("path-to-file");
height: xx;
width: yy;
}
.image:hover {
background-image: url("path-to-different-file");
}
This div will then change it's background image.
It's possibly using this HTML, yes. (As long as you insert the missing quote after the src, that is!)
a.photo:hover img {
display: none
}
a.photo:hover::after {
content: url(http://lorempixel.com/100/100);
}
<div class="mix category-1">
<a href="img/holder-01-large.png" class="photo">
<img src="http://lorempixel.com/g/100/100" alt="Ram - Srbija" class="img-small-1" />
</a>
Primer montaze
<a class="popup-youtube" href="https://www.youtube.com/watch?v=dz1kDQEHJaU">Video primer</a>
</div>
Note that I changed the HTML to point to another image on the web in order to show something here in the snippet; hope you don't consider that to be cheating!
if you can place a div instead of an imgtag, you can add the background-imgproperty in css and then a hover. Something like this:
.img-small-1{
background-img: url('..img/holder-01-small.png');
width: 'your image's width';
height: 'your image's height';
}
.img-small-1:hover {
background-img: url('..img/myOtherImage.png');
}
How can we remove space from bottom of box when we use image with width 100% in it
<div class="midVideo"><img src="images/videoImg.png" alt="" /></div>
.midVideo{
width:487px;
display:inline-block;
border-radius:10px;
overflow:hidden;
border:solid 12px #630400;
background:#003;
}
.midVideo img, .midVideo iframe{
width:100%;
}
.midVideo img {
display: block;
}
Add display block property to image
Images are replaced elements. These are treated much alike inline elements - so they are placed onto the baseline of the parent element. The space below is reserved for letters which excess the height like pqg and so on. Since images don't need this space, you just need to define display:block on the image to remove it.
Simple way is
<img style="height: 100%;" src="images/videoImg.png" alt="" />
Hard way is
<div class="midVideo">
<img style="[b]<? $img_size = getimagesize('images/videoImg.png'); if ($img_size[0]>$img_size[1]) echo 'width'; else echo 'height'; ?>[/b]: 100%;" src="images/videoImg.png" />
</div>
When I try to assign a height to my <div> that contains an <img>, it’s not modified, just moved.
.banner #dornierenvoj {
left:-95px;
bottom:-90px;
height:-100px;!important
position: absolute;
}
<div id="mapplane">
<img src="templates/protostar/images/planeminiature.png" />
<div id="dornierenvoj">
<img src="templates/protostar/images/dornierenvoj.png" />
</div>
</div>
First there is no negative height or width in css !
Second U can use this code to give that image height :
.banner #dornierenvoj img {
height:100px;
}
That's because the css points to the div, not the image.
you have 2 options:
1: add a class to the image
.bannerImage {height:30px;}
<img class="bannerImage" src="pic.png">
define it in the css
#dornierenvoj img {height:30px}
<div id="dornierenvoj"><img src="pic.png"></div>
the code inside the {} will work on all images inside the div dornierenvoj.
use this :
<img src=""templates/protostar/images/planeminiature.png" width="400" height="400">
THIS IS AN EXAMPLE of width and height
I have the following setup
<div id="outerDiv" style="width:100%;">
<div id="innerDiv">
<center>
<a href="http:/..." title="..">
<img src="http://...jpg" width="800" height="xxx" alt="..">
</a>
</center>
</div>
<div>
The width of the outerDiv can change based on browser view-port. Is there a way to restrict the width on the innerDiv just by using a style attribute, such that it overrides the included image width (800 in this example). Currently the image spans beyond the viewport and I would like the div/browser to shrink the image to the inner-div-size.
Am looking for something like:
<div id="outerDiv" style="width:100%;">
<div id="innerDiv" style="attribute:xxx;" or something similar>
<center>
<a href="http:/..." title="..">
<img src="http://...jpg" width="800" height="xxx" alt="..">
</a>
</center>
</div>
<div>
Please note that : the innerDiv is rendering 'variable' data coming from a stored parameter for instance. I only have control on the style on the innerDiv to make sure that things like 'center' or 'width' on the innerHtml does not go beyond what the outerDiv is setting. I have tried to use 'max-width' on the outer-div, but that didn't seem to work (I am not an expert on html/css - so I could have done it incorrectly).
Many thanks for all your help !
max-width property can help you.
Remove width attribute from img tag and write additional css code:
<style>
#innerDiv { text-align: center; width: 800px; }
#innerDiv a > img { display: inline-block; max-width: 100%; }
</style>
ComFreak has the complete answer.
Remove the center tag and instead add some css. Also add an id to that image if you want to target only that image specifically as far as its size.
#innerDiv {
max-width:800px;
margin:0 auto;}
img {/*use 'img#idOfimage' instead of 'img' if you end up adding an id to image */
width:100%;
height:0 auto;}
This should take care of it. You can put the css in a style tag in the header or better yet in a separate css file.
Don't use center tag. It defentinatly is outdated. Instead use margin: 0 auto; That will center the content. And use the max-width property for the innerDiv id. This is a great reference source. http://www.w3schools.com/cssref/pr_dim_max-width.asp