I'm new to this whole Bootstrap scene.
Trying to put an image as a navbar brand and have it resized when the windows does
<a class="navbar-brand" href="#"><img alt="Brand" src="images/logo.png" class="img-responsive" /></a>
I've also tried img-fluid and adding style='width:100%', but nothing works and its size is always static.
Put on the image the max-width:100%, shall work
Try this,
a {
display: block;
width: /* depending on how much space you wanted for your navbar-brand */
}
img {
max-width: 100%;
}
With images you'd want to add:
.img-responsive {
height: auto; // the height will be in the images correct aspect ratio.
max-width: 100%; //Keep the image width the same as it's parents container.
}
Your code is working well.
I've tried same code here. Please check.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<a class="navbar-brand" href="#"><img alt="Brand" src="http://img.logospectrum.com/dec/dummy-logo.jpg" class="img-responsive" /></a>
Related
I'm trying to use an image as a link but only one image can be clicked and the other images aren't working as links. I use text-center class
my HTML code:
<div class="foot text-center">
<img src="img/face.png" alt="facebook">
<img src="img/tw.png" alt="twitter">
<img src="img/in.png" alt="linkedin">
</div>
and my css file only has for "foot" class:
.foot{
height: 100px;
background-color: #401BE6;
}
what is the problem?
u need to define a display: block; on that <a href=''> element
Inline elements can't be aligned center unless we use the display: block property on them so apply the display: block property to the anchor elements
I hope I interpreted your desired final outcome.
https://jsfiddle.net/vLk8gtjs/30/
Make your buttons inline instead of vertically stacked.
Therefore: create a new class and class each link. I changed the bg to make it easier for me to work with
.img_links {
text-align: center;
display: inline-block;
width: 32%;
}
This aligns links within your div footer box.
I'm not sure why your links aren't working. Try this solution out and leave a comment if your images are displayed, but not clickable.
OPTION ONE
.foot.text-center {
display: block;
text-align: center;
}
OPTION TWO (INLINE CSS)
<div class="foot text-center" align="center">
<img src="img/face.png" alt="facebook">
<img src="img/tw.png" alt="twitter">
<img src="img/in.png" alt="linkedin">
</div>
I am trying to place two logos with links inline in HTML in a jupyter notebook but couldn't get it working proprly.
<a href="https://colab.research.google.com/github/sample_repo/sample_notebook.ipynb">
<img src="https://colab.research.google.com/assets/colab-badge.svg" alt="Open In Colab"/, width=150, height=150/></a>
<a href="https://mybinder.org/v2/gh/https%3A%2F%2Fgithub%2Fsample_repo/main?filepath=sample_notebook.ipynb">
<img src="https://mybinder.org/badge_logo.svg" alt="Open In mybinder"/, width=150, height=150/></a>
What I have tried so far?
I tried to put the logo in a div and then tried to align it to left using css
I tried to place the logo with link in a list
None of them worked! The logos right now looks like this
What I am trying to achieve?
I want the logo to be inline separated by space placed from left to right
You can place them inside div with display: flex and disable flex-wrap.
Also do not set both width and height for your images, it can stretch them without keeping the original ration. Only define one property, see snippet.
.logo {
display: flex;
flex-wrap: none;
flex-gap: 1em;
}
/* space between links */
.logo > a {
margin-right: 6px;
}
/* scale your images like this */
img {
height: 40px;
}
<div class="logo">
<a href="https://colab.research.google.com/github/sample_repo/sample_notebook.ipynb">
<img src="https://colab.research.google.com/assets/colab-badge.svg" alt="Open In Colab"></a>
<a href="https://mybinder.org/v2/gh/https%3A%2F%2Fgithub%2Fsample_repo/main?filepath=sample_notebook.ipynb">
<img src="https://mybinder.org/badge_logo.svg" alt="Open In mybinder" /></a>
</div>
For markdown application try to place Your code inside <p align="left">YOUR CODE</p> (see example below).
You can also choose left or right.
<p align="left">
<a href="https://colab.research.google.com/github/sample_repo/sample_notebook.ipynb">
<img src="https://colab.research.google.com/assets/colab-badge.svg" alt="Open In Colab"/, width=150, height=150/></a>
<a href="https://mybinder.org/v2/gh/https%3A%2F%2Fgithub%2Fsample_repo/main?filepath=sample_notebook.ipynb">
<img src="https://mybinder.org/badge_logo.svg" alt="Open In mybinder"/, width=150, height=150/></a>
</p>
i'm building an website and came across this problem: i have a image with 345x300.
In my div, she gets the widths of 82 x 118, staying like this:
I need the image to have 82 x 82 width, and when i set it gets flattern.
What can i do to fix this problem? Sorry for my bad english.
If needed, this is the website i'm working: https://2018.escambofotografico.com.br/ (the problem i'm talking its in the end of the page)
Thanks everyone!
You can also do this using the object-fit css property.
I made a little example for you on how it works.
$(function(){
$('.list-group button').click(function(e) {
e.preventDefault()
$that = $(this);
$that.parent().find('button').removeClass('active');
$that.addClass('active');
$("img").removeClass();
$("img").addClass($that.prop('id'));
});
})
img {
height: 182px;
width: 182px;
}
.fill {
object-fit: fill;
}
.contain {
object-fit: contain;
}
.cover {
object-fit: cover;
}
.none {
object-fit: none;
}
.scale-down {
object-fit: scale-down;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-6">
<div class="list-group">
<button type="button" class="list-group-item list-group-item-action" id="fill">object-fit: fill;</button>
<button type="button" class="list-group-item list-group-item-action" id="cover">object-fit: cover;</button>
<button type="button" class="list-group-item list-group-item-action" id="contain">object-fit: contain;</button>
<button type="button" class="list-group-item list-group-item-action" id="none">object-fit: none;</button>
<button type="button" class="list-group-item list-group-item-action" id="scale-down">object-fit: scale-down;</button>
</div>
</div>
<div class="col-6">
<img src="http://coveractionspremium.com/images/SoftwareBoxCD-model6v2-coveractions1.jpg" alt="">
</div>
</div>
</div>
Here is a Codepen you can play around with:
https://codepen.io/gurgen/pen/jKmXXW
When you set the dimensions of an html image tag, those are the dimensions that will display. If you take a rectangular image and display it as a square, you're going to get some distortion. The solution is to either edit your images with some padding to make them the exact size (and shape) you want, or else display them at the same aspect ratio that the images start at.
Also, note that your image is much larger than you are displaying. If bandwith for you server or customers is a concern, you're better off to resize the image to the size you want to display. The lightroom image is approximately 42Kb, but you might be able to resize it at 82x82 and send a ~6Kb file instead. For a mobile or low bandwith customer, that savings multiplied by 12 images is 432Kb. Your server has to serve up those wasted bytes to every customer, which you may be paying for.
Looking at some of your other images, you're scaling them up. Modern browsers will try to scale images smoothly, but you'll always lose some display quality doing this. Your best bet is to size images at the exact dimensions you want to display when you can.
To avoid stretching images in a fixed size container, you can set the max-height and max-width on the image tag to 100%. Once the height or width fills the container, it won't stretch the image.
So, if you want your image in a 82x82px container, you can do this for each image:
<div class="thumbnail">
<img src="...">
</div>
With the following CSS:
.thumbnail {
height: 82px;
width: 82px;
}
.thumbnail > img {
max-height: 100%;
max-width: 100%;
}
Implementing a "play video" function on a web site. Each video content item can have a different image. Each of these images will have the same width, but potentially differing heights (they are resized on upload to maintain aspect ratio to meet standard width requirements).
The plan was to display another transparent "play button" image over top of the content image using markup like this:
<div class="media">
<a class="videoLink" href="#" style="background-image: url(http://cloud.github.com/downloads/malsup/cycle/beach2.jpg);" >
<img src="PlayButton.png" alt="Click to Play" height="200" width="300" />
</a>
</div>
This is very similar to how channel 9 does it on their home page. This, however, appears to assume any image is of standard height and width. Are there alternative ways of tackling this?
Forgot to mention originally. We have a predefined width that things will fit into, however, each image may have a different height. For example, the same markup needs to be used to support the following images:
W x H
400 x 200
400 X 300
400 X 400
The Play button needs to be centered in each image.
Instead of the inner element being an <img>, you could make it a <div>, styled with the playbutton as the background image, positioned in the center.
<div class="media">
<a class="videoLink" href="#" style="background-image: url(http://cloud.github.com/downloads/malsup/cycle/beach2.jpg);" >
<div style='background:url(PlayButton.png) center center;' alt="Click to Play" height="200" width="300" />
</a>
</div>
You'll still need to know the size of the thumbnail image, as you'll still need to supply height and width for the div - since you're displaying the thumbnail as a background image, you won't be able to have the box scale to the right size automatically. But at least now your code can set the values for height and width without worrying about the shape of the play button getting distorted.
(note: the play button as a background image should probably be in a separate stylesheet rather than being declared inline as per my example; I did it like that to demonstrate how it differs from your original code, rather than to show best practice)
Need some your CSS to make sure things work, but this may help you:
.media {
display: table;
}
.media img {
display: table-cell;
vertical-align: middle;
display: block;
margin: 0 auto;
}
If not, please add you CSS so I can Fiddle it and make it happen.
I'd do it like this.
<div class="media">
<a class="videoLink" href="#"></a>
<img class="thumbnail" src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg"/>
</div>
Separate the thumbnail image from the link. We want the link to appear on top of the image, and the image to stretch the height of the <div class="media">.
The CSS:
.media {
position: relative;
}
.videoLink {
display: block;
height: 100%;
width: 100%;
background-image: url(PlayButton.png);
background-position: center center;
position: absolute;
z-index: 2;
}
I'm having a hard time with IE6 lately on a particular problem, here's the bit of html I'm on :
<a href="http://www.mylink.com" style="display:block;width:200px;height:200px;">
<span style="display:block;width:100px;height:100px;">
<img src="img.jpg" alt="My image" />
</span>
</a>
Everything is fine with Firefox etc, but the link won't work by clicking directly on the image on IE6 (but will do work anywhere else on the link).
Here is a link:
http://www.daniel-rico.com/demos/ie/
Someone has an idea?
Thanks!
edit: This does not work on IE7 either :/
Thanks for your answers!
I do need the span tag. I should have explained a little more what I was trying to do; here it is:
I need a box clickable. Inside of it I need:
another box with a fixed size which will contain a dynamic image (random ratio)
some text
i just tried it on:
<span style="display:block;width:100px;height:100px;">
<a href="http://www.mylink.com" style="display:block;width:200px;height:200px;">
<img src="img.jpg" alt="Click your image now" />
</a>
</span>
Remove the span tag, I don't think you need it
<div style="width: 200px; height: 200px;">
<a href="http://www.mylink.com" style="display: block; width: 100px; height: 100px;">
<img src="img.jpg" alt="My image"/>
</a>
</div>
If you have control over the markup then extract the inline styles and use
<div id="link">
<a href="http://www.mylink.com">
<img src="img.jpg" alt="My image"/>
</a>
</div>
In the head of the document add a reference to an external stylesheet
<head>
<link rel="stylesheet" type"text/css" href="/Css/Style.css"/>
</head>
Create style.css and add
div#link
{
width: 200px;
height: 200px;
}
div#link a
{
display: block;
width: 100px;
height: 100px;
}
If you are using this style of link in multiple places remove the id on the div and replace with
<div class="link">
...
</div>
And change the selector in the css from # to .
div.link
...
If you are having problems only in IE6 you can also use conditional comments to include a stylesheet that fixes IE6 specific problems
<head>
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="/Css/IE6.css"/>
<![endif]-->
</head>
Oddly enough, removing the width and height properties from the span allows you to click on the image.
<a href="http://www.mylink.com" style="display:block;width:200px;height:200px;">
<span style="display:block;">
<img src="img.jpg" alt="My image" />
</span>
</a>
Of course this completely changes the layout but it might help solve the IE bug.
An alternate method would be to use a div with a background-image instead of an img element:
<a href="http://www.mylink.com" style="display:block;width:200px;height:200px;">
<span style="display:block;width:100px;height:100px;">
<div style="background-image:url(img.jpg);width:100px;height:100px;" title="My Image"><div>
</span>
</a>
Edit:
The background-image solution doesn't work for random ratio image you mentioned in your comment.
If you just want to achieve the layout in the mockup:
<a href="http://www.mylink.com" style="display:block;width:200px;height:200px;padding-left:10px;">
<img src="img.jpg" alt="My image" />
<span style="padding-left:10px;">some text</span>
</a>
I was facing almost an identical problem building a nav in a content-managed site, but compounded by the fact that some of the nav items needed to open in new windows - meaning the solution to use javascript became problematic.
Eventually, I ended up losing the <img... /> tag and replacing with a <span... /> and setting the background image inside the span (I could have used div's but that's bad form according to the W3C).
So referring back to your original example, I'd go with:
<a href="http://www.mylink.com" style="display:block;width:200px;height:200px;">
<span style="display:block;width:100px;height:100px;">
<span style="background-image=url(/img.jpg); width: 50px; height: 50px; display: block;">
<span class="Hidden">My image</span>
</span>
</span>
</a>
The easiest way to make that area clickable is to add position: relative to your link style; to preserve the cursor style under IE6, you can add cursor: hand to your span element.
a{ position: relative; display: block; width: 200px; height: 200px; }
span{ display: block; width: 100px; height: 100px; cursor: hand }
As other suggested, it is better to separate the IE6 specific styling with a conditional comment block.
Hope it helps and good luck ;)
Try to apply to span css property "zoom:0;". It works in my case.
I wasn't able to solve this with CSS only, I used Javascript to force the area to be clickable.
Disappointing, but well, it works...
Thanks everyone for your help ! I appreciate it :)