728x90
반응형

IMAGE 11

jQuery를 사용하여 이미지 소스 변경

질문 : jQuery를 사용하여 이미지 소스 변경 내 DOM은 다음과 같습니다. 누군가 이미지를 클릭하면 이미지 src가 로 변경되기를 원합니다. 여기서 x 는 이미지 번호 1 또는 2를 나타냅니다. 이것이 가능합니까 아니면 이미지를 변경하기 위해 CSS를 사용해야합니까? 답변 jQuery의 attr () 함수를 사용할 수 있습니다. 예를 들어 img id 속성이있는 경우 다음을 수행합니다. 그런 다음 다음과 같이 jQuery를 사용하여 이미지 src $("#my_image").attr("src","second.jpg"); click 이벤트에 첨부하려면 다음과 같이 작성할 수 있습니다. $('#my_image').on({ 'click': function(){ $('#my_image').attr('src'..

Android의 ListView에서 이미지를 지연 로드하는 방법

질문 : Android의 ListView에서 이미지를 지연로드하는 방법 ListView 를 사용하여 해당 이미지와 관련된 일부 이미지와 캡션을 표시하고 있습니다. 인터넷에서 이미지를 받고 있습니다. 텍스트가 표시되는 동안 UI가 차단되지 않고 이미지가 다운로드 될 때 표시되도록 이미지를 지연로드하는 방법이 있습니까? 총 이미지 수는 고정되어 있지 않습니다. 답변 다음은 내 앱이 현재 표시하는 이미지를 보관하기 위해 만든 것입니다. 여기서 사용되는 "Log"개체는 Android 내부의 최종 Log 클래스를 둘러싼 맞춤 래퍼입니다. package com.wilson.android.library; /* Licensed to the Apache Software Foundation (ASF) under one o..

CSS를 통해 PNG 이미지의 색상을 변경하는 방법

질문 : CSS를 통해 PNG 이미지의 색상을 변경 하시겠습니까? 흰색으로 단순한 모양을 표시하는 투명한 PNG가 주어지면 어떻게 든 CSS를 통해 색상을 변경할 수 있습니까? 어떤 종류의 오버레이입니까? 답변 -webkit-filter 및 filter 와 함께 필터를 사용할 수 있습니다. 필터는 브라우저에 비교적 새롭지 만 다음 CanIUse 표에 따라 90 % 이상의 브라우저에서 지원됩니다. https://caniuse.com/#feat=css-filters 이미지를 그레이 스케일, 세피아 등으로 변경할 수 있습니다 (예제 참조). 이제 필터를 사용하여 PNG 파일의 색상을 변경할 수 있습니다. body { background-color:#03030a; min-width: 800px; min-heig..

IMG와 CSS 배경 이미지의 적절한 사용시기

질문 : IMG와 CSS 배경 이미지는 언제 사용합니까? background-image IMG 태그를 사용하여 이미지를 표시하는 것이 더 적합한 상황은 무엇입니까? 요인에는 접근성, 브라우저 지원, 동적 콘텐츠 또는 모든 종류의 기술적 제한 또는 사용성 원칙이 포함될 수 있습니다. 답변 IMG의 적절한 사용 다른 사용자가 페이지를 인쇄하도록 하려면 IMG를 사용하십시오. 이미지가 기본적으로 포함되도록 하려면 IMG를 사용하십시오.—JayTee 이미지에 경고 아이콘과 같은 중요한 의미 의미가 있는 경우 IMG(Alt 텍스트 포함)를 사용합니다. 이렇게 하면 화면 판독기를 포함한 모든 사용자 에이전트에서 이미지의 의미가 전달될 수 있습니다. CSS background-image 사용 시기 이미지가 로고, 다..

HTML / CSS에서 이미지를 회색조로 변환

질문 : HTML / CSS에서 이미지를 회색조로 변환 HTML/CSS 로 그레이 스케일로 컬러 비트 맵을 표시하는 간단한 방법이 있습니까? IE와 호환 될 필요는 없습니다 (그렇지 않을 것이라고 생각합니다). FF3 및 / 또는 Sf3에서 작동한다면 저에게 충분합니다. SVG 와 Canvas로 모두 할 수 있다는 것을 알고 있지만 지금은 많은 작업을하는 것 같습니다. 이것을하는 정말 게으른 사람의 방법이 있습니까? 답변 CSS 필터에 대한 지원이 Webkit에 포함되었습니다. 이제 브라우저 간 솔루션이 있습니다. img { filter: gray; /* IE6-9 */ -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */ fi..

'div'컨테이너에 맞게 이미지 크기를 자동으로 조정하는 방법

질문 : 'div'컨테이너에 맞게 이미지 크기를 자동으로 조정하려면 어떻게합니까? 너비 : 높이 비율을 유지하면서 더 작은 너비 div 컨테이너에 맞도록 큰 이미지의 크기를 자동으로 조정하는 방법은 무엇입니까? 예 : stackoverflow.com-이미지가 편집기 패널에 삽입되고 이미지가 너무 커서 페이지에 맞지 않으면 이미지 크기가 자동으로 조정됩니다. 답변 이미지 태그에 명시적인 너비 또는 높이를 적용하지 마십시오. 대신 다음을 제공하십시오. max-width:100%; max-height:100%; 또한 height: auto; 너비 만 지정하려는 경우. 예 : http://jsfiddle.net/xwrvxser/1/ img { max-width: 100%; max-height: 100%; } ...

div 내부에서 이미지를 세로로 정렬하는 방법

질문 : div 내부에서 이미지를 세로로 정렬하는 방법 div 내부에 이미지를 어떻게 정렬 할 수 있습니까? class ="frame "을 사용하여 를 세로로 가운데에 배치해야합니다. .frame 의 높이는 고정되어 있고 이미지의 높이는 알 수 없습니다. 유일한 해결책 인 경우 .frame 에 새 요소를 추가 할 수 있습니다. Internet Explorer 7 이상, WebKit, Gecko에서이 작업을 수행하려고합니다. 여기 에서 jsfiddle을 참조하십시오. .frame { height: 25px; /* Equals maximum image height */ line-height: 25px; width: 160px; border: 1px solid red; text-align: center; ma..

배경에서 CSS 만 사용해서 이미지 늘리기 및 크기 조정

질문 : 백그라운드에서 CSS 이미지 늘리기 및 크기 조정-CSS 만 사용 브라우저 뷰포트 크기에 따라 배경 이미지가 늘어나고 크기가 조정되기를 원합니다. 예를 들어 Stretch 및 Scale CSS 배경과 같은 작업을 수행하는 Stack Overflow에 대한 몇 가지 질문을 보았습니다. img 태그가 아닌 background 사용하여 이미지를 배치하고 싶습니다. 그 img 태그가 배치되고 CSS로 img 태그에 찬사를 보냅니다. width:100%; height:100%; 작동하지만 그 질문은 조금 오래되었으며 CSS 3에서 배경 이미지 크기를 조정하면 꽤 잘 작동한다고 말합니다. 이 예제를 첫 번째 예제로 시도했지만 제대로 작동하지 않았습니다. background-image 선언으로 수행하는 좋은..

CSS 이미지 크기, 비율에 맞게 늘이는 방법

질문 : CSS 이미지 크기, 비율에 맞게 늘일 수 있습니까? 이미지가 있는데 특정 너비와 높이 (픽셀 단위)로 설정하고 싶습니다. width:150px; height:100px )를 사용하여 너비와 높이를 설정하면 이미지가 늘어나고보기 흉할 수 있습니다. 어떻게 CSS를 사용하여 특정 크기로 이미지를 기입하고, 스트레칭하지 않으려면? 이미지 채우기 및 늘리기의 예 : 원본 이미지 : 늘어난 이미지 : 채워진 이미지 : 위의 채워진 이미지 예에서 먼저 이미지의 크기가 150x255 (유지 된 가로 세로 비율)로 조정 된 다음 150x100으로 잘립니다. 답변 object-fit 사용할 수 있습니다. .cover { object-fit: cover; width: 50px; height: 100px; } 여..

CSS로 img 태그의 src 속성을 수정하는 방법

질문 : CSS에서 img 태그의 src 속성에 해당하는 것을 설정할 수 있습니까? CSS에서 src 속성 값을 설정할 수 있습니까? 현재 내가하고있는 것은 : 그리고 나는 그것이 이와 같은 것이기를 원합니다. .myClass { some-src-property: url("pathTo/myImage.jpg"); CSS의 background 또는 background-image: 속성을 사용하지 않고이 작업을 수행하고 싶습니다. 답변 content:url("image.jpg") 사용하세요. 완전한 작동 솔루션 ( 라이브 데모 ) : 테스트 및 작동 : 크롬 14.0.835.163 Safari 4.0.5 오페라 10.6 테스트되었으며 작동 하지 않음 : FireFox 40.0.2 (개발자 네트워크 도구를 관찰..

ASP.NET MVC 컨트롤러가 이미지를 반환 하는 방법

질문 : ASP.NET MVC 컨트롤러가 이미지를 반환 할 수 있습니까? 단순히 이미지 자산을 반환하는 컨트롤러를 만들 수 있습니까? 다음과 같은 URL이 요청 될 때마다 컨트롤러를 통해이 논리를 라우팅하고 싶습니다. www.mywebsite.com/resource/image/topbanner topbanner.png 를 조회하고 해당 이미지를 클라이언트로 직접 보냅니다. 보기를 만들어야하는 경우의 예를 보았습니다.보기를 사용하고 싶지 않습니다. 컨트롤러만으로 모든 것을하고 싶습니다. 이것이 가능한가? 답변 기본 컨트롤러 File 메서드를 사용합니다. public ActionResult Image(string id) { var dir = Server.MapPath("/Images"); var path =..

개발관련/other 2021.06.09
728x90
반응형