Say we have the following HTML:
<img src="IMAGE-URL" />
And I need to change the image height in CSS, without adding classes or id.
How do I write this in CSS, something like IMAGE-URL height: 100px ?
You can use an attribute selector:
img[src="IMAGE-URL"] {
height: 100px;
}
It's only possible if you attach style to the img itself in html like:
<img src="IMAGE-URL" style="height: 100px;"/>
Or in CSS to the img globally like:
img {
height 100%;
}
Related
I am new to SCSS and frontend development in general. I have this simple rule defined in a .scss file.
.header-logo {
content: url('/assets/logo/logotype-blue.png');
height : 40px;
}
My goal is to have a class containing my header image so I can use it on every header in different pages.
The problem is when I use that rule like this:
<img class="header-logo" alt="logo"/>
The image is rendered but the height constraint is not applied.
When I remove the class to have something like this:
<img src="/assets/logo/logotype-blue.png" height="40" alt="logo"/>
The height constraint is well applied. I am a bit confused, some explanations would be very helpful.
try a class like this on a Div element, not img tag.
.sizeMe{
height: 40px;
width: auto;
background-image: url('/assets/logo/logotype-blue.png');
background-repeat: no-repeat;
background-size: contain;
}
<div class="profile">
<img src="image/JaeHeadShot.jpg" alt="Head Shot"/>
<h1> Jae Hong </h1>
</div>
.profile{
border: 2px solid rgba(0,0,0,0.3);
text-align:center;
padding: 30px;
}
img.profile{
width:423;
height:281;
}
Here are my HTML and CSS. I am not sure what I'm doing wrong, but the image won't get smaller. However, if I do
<img src="image/JaeHeadShot.jpg" alt="headshot" width="423" height="281"/>
the image seems to change. I just want to know why it's not working when I work on the CSS.
Appreciate your help!
The img.profile wont select the image since the image doesn't have a profile class, and the numbers are missing the units.
Do it like this:
img {
width : 423px;
height : 281px;
}
profile is the class for the div element, not for the image.
img.profile{
width:423;
height:281;
}
if you want to use special css for the image you can define a class for it.
.myImage{ width: 423px; height: 281px}
and use it in image tag.
<img src="image/JaeHeadShot.jpg" alt="headshot" class=".myImage"/>
The image doesn't have a class attribute in your code.So,accessing it with class profile won't fetch you image.
So,as there is only image,you can just give
img {
width:423;
height:281;
}
I have a division placed on the bottom of the page. I put an image into this division, but I don't know how to modify the image. The problem may be, that the inline style for <img> is setting modification rules for all images. I have an inline style sheet that has this code and HTML code for <div>.
My CSS code looks like this:
<style type="text/css">
img {
image-align: center;
padding: 10px;
height: 200px;
width: 140px;
}
div {
position: absolute;
right: 10px;
}
</style>
And my HTML code is like that:
<div align="center" >
<img src="images/music_banner.jpg" >
</div>
you can do this:
div img{
}
or give the div a name and do this
#div img{
}
or you give the img an id as below
<div>
<img id="mg"/>
</div>
Use id as #mg in CSS code.
or you can do as define class name in img tag.
<div>
<img class="mg"/>
</div>
Use class as .mg in CSS Code.
You might try learning a little bit more about CSS selectors: these are the rules that tell the browser which element you'd like to apply the following rules to.
I would recommend Code Academy for an easy to follow course. You can skip down to the CSS section if you are already comfortable with HTML.
Note: if you google CSS, you'll get "w3schools" as the first results. That website is generally derided on Stack Overflow. I don't know if it's really that bad, but I tend to skip it just because everyone else has a bad opinion of it. Your call if you find it helpful of course.
I should note that I like to use the W3C (World Wide Web Consortium) website for reference, as they're the ones trying to make everything standard. It is a pretty technical read, though.
Create a div element in your HTML code:
<div class="parent">
<img src="image">
</div>
Than add this to your CSS code:
.parent {
width: 42px; /* I took the width from your post and placed it in css */
height: 42px;
}
/* This will style any <img> element in .parent div */
.parent img {
height: 100%;
width: 100%;
}
Can I use CSS programmatic to put the attributes of my img tag?
<span><img class="img-dollar"></img></span>
<span><img class="img-royalty"></img></span>
I want to put src to get the image and put height and width to scale it down. How can I achieve?
The answer is No. You can't manipulate the html tags with the help of css. Use javascript for that.
CSS is only used for manipulate the style attributes.
To change the height and width property using css you can do something like this
.img-dollar
{
height:100px;
width: 100px
}
You can set the size of an image using css e.g.
img{
width: 200px;
height: 200px;
}
If you have div wrapper you can make the image take up the size of that div e.g.
.wrapper{
width: 200px;
height: 200px;
}
.wrapper img{
width: 100%;
height: auto;
}
You can fake the src using an image as a background e.g.
.img{
width: 200px;
height: 200px;
background: /images/image.gif
background-size: 200px 200px /* CSS3 */
}
You can find out more about background image size here http://www.css3.info/preview/background-size/
You can't alter attributes in CSS, only create rules based on attributes.
In your case, you can use CSS content property to set URL to image or inline Base64-encoded images as content of certain elements.
More information here: https://developer.mozilla.org/en-US/docs/Web/CSS/content and here: http://www.w3schools.com/cssref/pr_gen_content.asp
For example:
HTML:
<span class="img-dollar"></span>
<span class="img-royalty"></span>
CSS:
span.img-dollar:before {
content: url(images/dollar.png);
}
span.img-royalty:before {
content: url(images/royalty.png);
}
This will put image into your <span>.
You can't set the src but use the background to achieve a similar effect
img-dollar{
width:5px;
height:5px;
background:url(dollar.png);
}
Yes and No.
You can't add a src attribute using css. You could however use
Javascript for that.
a quick example:
$("img.imgNav").hover(function() {
var src = $(this).attr("src").match(/[^\.]+/) + "over.png";
$(this).attr("src", src);
},
function() {
var src = $(this).attr("src").replace("over", "");
$(this).attr("src", src);
});
You can style the background-color and width/height with css.
img
{
background-color: #222;
width: 200px;
height: 100px;
}
for example.
You could give it a set with or height then use background:url();
Or, using JQuery, you could use $('img-dollar').attr('src', 'image.jpg');
Or, using pure javascript, you could use:
document.getElementById('img-dollar').setAttribute("src", "image.png");
To change any attribute of html element you need to use javascript or jQuery .
you can change image source in jQuery as
$(document).ready(function(){
$('.img-dollar').attr('src','imgpath/imagename.png');
});
and similar code to change other attributes
Here im setting the content and size of an image through straight css:
http://jsfiddle.net/nQxje/
.img-dollar{
content: url('http://woodgears.ca/box_joint/tiny_box_scale.jpg');
height: 100px;
width: 100px;
}
hope this works for you.
I want to fix the size of empty image to 150px. On Firefox, I can use float: left, but it doesn't work on Google Chrome.
HTML:
<div>
<img src='some broken url' alt='no image'>
<br>
<img src='http://farm7.staticflickr.com/6063/6046604665_da6933bd10.jpg'>
</div>
CSS:
div {
width: 450px;
height: 500px;
background: cyan;
}
img {
display: block;
max-width: 100%;
min-height: 150px;
min-width: 150px;
background: grey;
}
Is there a CSS solution for this?
I think there is some misunderstanding. The srcs are supposed to be random urls that I wouldn't know in advanced.
Ideally, use an empty placeholder <div> for this:
<div>
<div><!----></div>
<br>
<img src='http://farm7.staticflickr.com/6063/6046604665_da6933bd10.jpg'>
</div>
... and give it the dimensions you need. This will allow you to do stuff like show a background placeholder image in its place etc.
If you want to style an empty image-tag:
img[src=""] { width: 150px; }
Should work, expect for IE6.
If you want to get it cross browser compatible, the solution from #Tom would be your best choice.
Or jQuery solution (because CSS can't check for broken URLs):
$('img').error(function(){
$(this).css('width', '150px');
});