Использовать CSS для установки атрибутов img

Question

Могу ли я использовать программную программу CSS, чтобы поместить атрибуты моего тега img?

<span><img class="img-dollar"></img></span> 

<span><img class="img-royalty"></img></span> 

Я хочу поместить src, чтобы получить изображение и установить высоту и ширину, чтобы уменьшить масштаб. Как я могу достичь?

Answer 1

Ответ: № Вы не можете манипулировать тегами html с помощью css. Для этого используйте javascript.
CSS используется только для управления атрибутами стиля.

Для изменения высоты и ширины свойства с помощью CSS вы можете сделать что-то вроде этого

.img-dollar 
{ 
    height:100px; 
    width: 100px 
} 

Answer 2

Вы не можете установить СРК, но использовать фон для достижения подобного эффекта

img-dollar{ 
    width:5px; 
    height:5px; 
    background:url(dollar.png); 

} 

Answer 3

Да и №

• Вы не можете добавить атрибут src, используя css. Однако вы можете использовать Javascript .

быстрый пример:

$("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); 
}); 

• Вы можете стиль цвет фона и ширина/высота с помощью CSS.

img 
{ 
    background-color: #222; 
    width: 200px; 
    height: 100px; 
} 

, например.

Answer 4

Вы могли бы дать ему сет или высоту затем использовать background:url();

Или, используя JQuery, вы можете использовать $('img-dollar').attr('src', 'image.jpg');

Или, используя чистый JavaScript, вы можете использовать:

document.getElementById('img-dollar').setAttribute("src", "image.png");

Answer 5

Вы не можете изменять атрибуты в CSS, создавать правила на основе атрибутов.

В вашем случае вы можете использовать свойство CSS content, чтобы установить URL-адрес изображения или встроенных изображений с кодировкой Base64 в качестве содержимого определенных элементов.

Более подробная информация здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/content и здесь: http://www.w3schools.com/cssref/pr_gen_content.asp

Например:

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); 
} 

Это поместит изображение в ваш <span>.

Answer 6

Чтобы изменить любой атрибут элемента html, вам нужно использовать javascript или jQuery.

вы можете изменить источник изображения в JQuery, как

$(document).ready(function(){ 
    $('.img-dollar').attr('src','imgpath/imagename.png'); 
}); 

и подобный код, чтобы изменить другие атрибуты

Answer 7

Вы можете установить размер изображения с помощью CSS, например,

img{ 
width: 200px; 
height: 200px; 
} 

Если у вас есть обертка div, вы можете сделать изображение размером с этот div, например.

.wrapper{ 
    width: 200px; 
    height: 200px; 
} 

.wrapper img{ 
    width: 100%; 
    height: auto; 
} 

Вы можете подделать src, используя изображение в качестве фона, например.

.img{ 
    width: 200px; 
    height: 200px; 
    background: /images/image.gif 
    background-size: 200px 200px /* CSS3 */ 
} 

Вы можете узнать больше о фоне размере изображений здесь http://www.css3.info/preview/background-size/

Answer 8

Здесь установка содержания и размера изображения с помощью прямого CSS им:

http://jsfiddle.net/nQxje/

.img-dollar{ 
    content: url('http://woodgears.ca/box_joint/tiny_box_scale.jpg'); 
    height: 100px; 
    width: 100px; 
} 

надежды этого работает для вас.