CSS 크기 조정 및 잘라낸 이미지 표시
크기 비율이 다르더라도 일정한 너비와 높이를 가진 URL의 이미지를 보여주고 싶습니다.따라서 크기를 조정(비율 유지)한 다음 원하는 크기로 이미지를 잘라내고자 합니다.
할 수 .img과 저는 재과나자수있습다니로 수 .background-image.
둘 다 어떻게 해야 하나요?
예:
이 이미지:
가 이즈있음사입니다.800x600는 픽과저이는보럼싶습다니고여주셀의 처럼 보여주고 .200x100 수
와 함께img이미지 크기를 조정할 수 있습니다.200x150px:
<img
style="width: 200px; height: 150px;"
src="https://i.stack.imgur.com/wPh0S.jpg">
그래서 이런 생각이 듭니다.
<img style="width: 200px; height: 150px;" src="https://i.stack.imgur.com/wPh0S.jpg">그리고 함께background-image나는 이미지를 자를 수 있습니다.200x100픽셀
<div
style="background-image:
url('https://i.stack.imgur.com/wPh0S.jpg');
width:200px;
height:100px;
background-position:center;"> </div>
제공:
<div style="background-image:url('https://i.stack.imgur.com/wPh0S.jpg'); width:200px; height:100px; background-position:center;"> </div>둘 다 어떻게 해야 하나요?
이미지 크기를 조정한 다음 원하는 크기로 자르시겠습니까?
두 가지 방법을 조합하여 사용할 수 있습니다(예:
.crop {
width: 200px;
height: 150px;
overflow: hidden;
}
.crop img {
width: 400px;
height: 300px;
margin: -75px 0 0 -100px;
} <div class="crop">
<img src="https://i.stack.imgur.com/wPh0S.jpg" alt="Donald Duck">
</div>네거티브를 사용할 수 있습니다.margin를 서에이이니다동 합니다.<div/>.
를 사용하면 CSS3의 할 수 background-image와 함께, 두 가지 목표를 동시에 달성합니다.
css3.info 에는 많은 예가 있습니다.
donald_duck_4.jpg를 사용하여 예제를 기반으로 구현되었습니다.이 경우에는,background-size: cover;이 원하는 입니다. - 은 이원것입다니는하당신▁the에 맞습니다. 그것은 적합합니다.background-image포함된 전체 영역을 포함합니다.<div>여분의 클립을 끼웁니다(비율에 따라 다름).
.with-bg-size {
background-image: url('https://i.stack.imgur.com/wPh0S.jpg');
width: 200px;
height: 100px;
background-position: center;
/* Make the background image cover the area of the <div>, and clip the excess */
background-size: cover;
}<div class="with-bg-size">Donald Duck!</div>이거 써봤어요?
.centered-and-cropped { object-fit: cover }
이미지 크기를 조정하고 이미지를 잘라내야 했습니다(수직과 수평 모두).
저는 그것이 하나의 CSS 라인으로 이루어질 수 있다는 것을 발견하고 기뻤습니다.여기서 예를 확인하십시오. http://codepen.io/chrisnager/pen/azWWgr/ ?sshd=110
에 여기다니습있이 있습니다.CSS그리고.HTML예제의 : " 예의제코드이":
.centered-and-cropped { object-fit: cover }<h1>original</h1>
<img height="200" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3174/bear.jpg" alt="Bear">
<h1>object-fit: cover</h1>
<img class="centered-and-cropped" width="200" height="200"
style="border-radius:50%" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3174/bear.jpg" alt="Bear">.imgContainer {
overflow: hidden;
width: 200px;
height: 100px;
}
.imgContainer img {
width: 200px;
height: 120px;
}
<div class="imgContainer">
<img src="imageSrc" />
</div>
포함하는 div는 오버플로를 숨겨 이미지를 잘라냅니다.
img {
position: absolute;
clip: rect(0px, 140px, 140px, 0px);
}
<img src="w3css.gif" width="100" height="140" />
고마워요, 산초 지방.
저는 당신의 답변에 개선점이 있습니다.자르기는 모든 이미지에 매우 적합하므로 이 정의는 CSS 대신 HTML에 있어야 합니다.
<div style="overflow:hidden;">
<img src="img.jpg" alt="" style="margin:-30% 0px -10% 0px;" />
</div>
다음을 포함하는 이전 답변에 대한 약간의 추가 사항object-fit: cover:
객체 위치 특성을 사용하여 요소의 상자 내에서 대체된 요소의 내용 객체 정렬을 변경할 수 있습니다.
.trimmed-cover {
object-fit: cover;
width: 100%;
height: 177px;
object-position: center 40%;
}<img class="trimmed-cover" src="https://i.stack.imgur.com/wPh0S.jpg">
object-fit도움이 될 수도 있습니다, 만약 당신이 가지고 놀고 있다면.<img>꼬리표를 달다
아래 코드는 이미지를 잘라냅니다.오브제핏으로 놀 수 있습니다.
img {
object-fit: cover;
width: 300px;
height: 337px;
}
img {
position: absolute;
clip: rect(0px,60px,200px,0px);
}
사해보오시를 .clip-path속성:
클립 경로 속성을 사용하여 요소를 기본 모양 또는 SVG 원본에 클리핑할 수 있습니다.
참고: 클립 경로 속성이 더 이상 사용되지 않는 클립 속성을 대체합니다.
img {
width: 150px;
clip-path: inset(30px 35px);
}<img src="https://i.stack.imgur.com/wPh0S.jpg">여기 더 많은 예가 있습니다.
실시간 예: https://jsfiddle.net/de4Lt57z/
HTML:
<div class="crop">
<img src="example.jpg" alt="..." />
</div>
CSS:
.crop img{
width:400px;
height:300px;
position: absolute;
clip: rect(0px,200px, 150px, 0px);
}
설명:여기서 이미지의 크기는 이미지의 너비 및 높이 값에 따라 조정됩니다.그리고 자르기는 클립 속성에 의해 이루어집니다.
클립 속성에 대한 자세한 내용은 http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/ 을 참조하십시오.
자르기 클래스에 표시할 이미지 크기를 배치합니다.
.crop {
width: 282px;
height: 282px;
overflow: hidden;
}
.crop span.img {
background-position: center;
background-size: cover;
height: 282px;
display: block;
}
html은 다음과 같습니다.
<div class="crop">
<span class="img" style="background-image:url('http://url.to.image/image.jpg');"></span>
</div>
<p class="crop"><a href="http://templatica.com" title="Css Templates">
<img src="img.jpg" alt="css template" /></a></p>
.crop {
float: left;
margin: .5em 10px .5em 0;
overflow: hidden; /* this is important */
position: relative; /* this is important too */
border: 1px solid #ccc;
width: 150px;
height: 90px;
}
.crop img {
position: absolute;
top: -20px;
left: -55px;
}
파일스택과 같은 서비스가 이를 제공합니다.
이미지 URL을 가져가고 url 매개 변수를 사용하여 크기를 조정할 수 있습니다.그것은 꽤 쉽습니다.
가로 세로 비율을 유지하면서 200x100으로 크기를 조정하면 이미지가 이렇게 됩니다.
전체 URL은 다음과 같습니다.
https://process.filestackapi.com/AhTgLagciQByzXpFGRI0Az/resize=width:200/crop=d:[0,25,200,100]/https://i.stack.imgur.com/wPh0S.jpg
하지만 중요한 부분은.
resize=width:200/crop=d:[0,25,200,100]
div 태그에 img 태그를 넣고 둘 다 할 수 있지만 브라우저에서 이미지를 스케일링하지 않는 것이 좋습니다.브라우저에는 매우 단순한 스케일링 알고리즘이 있기 때문에 대부분의 경우 형편없는 작업을 수행합니다.먼저 Photoshop이나 ImageMagick에서 스케일링을 한 다음 고객에게 친절하고 예쁘게 제공하는 것이 좋습니다.
제가 한 일은 서버 사이드 스크립트를 만들어 서버 엔드에서 크기를 조정하고 사진을 잘라내어 웹을 통해 전송되는 데이터가 줄어듭니다.
꽤 사소한 일이지만 관심 있는 사람이 있다면 코드를 발굴해서 올릴 수 있습니다(asp.net ).
<div class="crop">
<img src="image.jpg"/>
</div>
.crop {
width: 200px;
height: 150px;
overflow: hidden;
}
.crop img {
width: 100%;
/*Here you can use margins for accurate positioning of cropped image*/
}
부트스트랩을에는 부스트사경사보십용시오해우을트랩용는하▁using를 해 보세요.{ background-size: cover; }를해위를 .<div>아마도 디비에게 수업을 해줄 것입니다.<div class="example" style=url('../your_image.jpeg');> 그서그것은래그가 됩니다.div.example{ background-size: cover}
저는 최근에 이것을 할 필요가 있었습니다.NOAA 그래프에 썸네일 링크를 만들고 싶었습니다.그들의 그래프는 언제든지 바뀔 수 있기 때문에, 저는 제 썸네일이 그것과 함께 바뀌기를 원했습니다.하지만 그래프에는 문제가 있습니다. 위쪽에 커다란 흰색 테두리가 있습니다. 따라서 축소판 그림을 축소해서 축소판 그림을 만들면 문서에 불필요한 공백이 생깁니다.
해결 방법은 다음과 같습니다.
http://sealevel.info/example_css_scale_and_crop.html
먼저 저는 약간의 산수를 할 필요가 있었습니다.NOAA의 원본 이미지는 960 × 720 픽셀이지만 상위 70 픽셀은 불필요한 흰색 테두리 영역입니다.저는 상단에 별도의 테두리가 없는 348 × 172 섬네일이 필요했습니다.즉, 원본 이미지의 원하는 부분이 720 - 70 = 650 픽셀 높이입니다.이를 172픽셀로 축소해야 했습니다. 예를 들어 172 / 650 = 26.5%입니다.즉, 70 = 19 행의 픽셀 중 26.5%를 축소된 이미지의 맨 위에서 삭제해야 했습니다.
그래서...
높이 = 172 + 19 = 191 픽셀을 설정합니다.
높이=높이
아래쪽 여백을 -19 픽셀로 설정합니다(이미지를 172 픽셀 높이로 단축).
여백-하단:-19인치
맨 위 위치를 -19 픽셀로 설정합니다(맨 위로 이동하여 맨 위의 19 픽셀 행이 오버플로우되고 맨 아래 행 대신 숨겨집니다).
상의:-19인치
결과 HTML은 다음과 같습니다.
<a href="…" style="display:inline-block;overflow:hidden">
<img width=348 height=191 alt=""
style="border:0;position:relative;margin-bottom:-19px;top:-19px"
src="…"></a>
보시다시피, 저는 <a> 태그를 포함하는 스타일을 선택했지만, 대신 <div> 스타일을 선택할 수 있습니다.
이 접근 방식의 한 가지 아티팩트는 경계를 표시하면 위쪽 경계가 없어진다는 것입니다.어차피 border=0을 사용하기 때문에 저에게는 문제가 되지 않았습니다.
Kodem의 이미지 크기 조정 서비스를 사용할 수 있습니다.http 호출만으로 이미지 크기를 조정할 수 있습니다.브라우저에서 편하게 사용하거나 프로덕션 앱에서 사용할 수 있습니다.
- 원하는 위치에 이미지를 업로드합니다(S3, imgur 등).
- 전용 API URL에 연결합니다(대시보드에서).
이미지를 자를 수 있는 Croppie라는 도구를 사용할 수도 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="https://foliotek.github.io/Croppie/croppie.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script>
<script src="https://foliotek.github.io/Croppie/croppie.js"> </script>
<script src="https://foliotek.github.io/Croppie/bower_components/exif-js/exif.js"> </script>
<style>
#page {
background: #ffffff;
padding: 20px;
margin: 20px;
}
#demo-basic {
width: 600px;
height: 600px;
}
</style>
</head>
<body>
<h1>Crop Image Demo</h1>
<input id="upload" type="file" />
<br />
<div id="page">
<div id="demo-basic"></div>
</div>
<input id="upload-result" type="button" value="Crop Image"/>
<br />
<img id="cropped-result" src=""/>
<script>
var $uploadCrop;
$("#upload").on("change", function () { readFile(this); show(); });
$("#upload-result").on("click", function (ev) {
$uploadCrop.croppie("result", {
type: "canvas",
size: "viewport"
}).then(function (resp) {
$("#cropped-result").attr("src", resp);
});
});
function show() {
$uploadCrop = $("#demo-basic").croppie({
viewport: { width: 100, height: 100 },
boundary: { width: 300, height: 300 },
enableResize: true,
enableOrientation: true,
mouseWheelZoom: 'ctrl',
enableExif: true
});
}
function readFile(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$("#demo-basic").addClass("ready");
$uploadCrop.croppie("bind", {
url: e.target.result
}).then(function () {
console.log("jQuery bind complete");
});
}
reader.readAsDataURL(input.files[0]);
}
else {
alert("Sorry - you're browser doesn't support the FileReader API");
}
}
</script>
</body>
</html>
언급URL : https://stackoverflow.com/questions/493296/css-display-an-image-resized-and-cropped
'programing' 카테고리의 다른 글
| Xcode 6에서 IPA를 만드는 방법은 무엇입니까? (0) | 2023.08.02 |
|---|---|
| CSS에서 px 또는 remvalue 단위를 사용해야 합니까? (0) | 2023.08.02 |
| 각도 반응 양식 오류:폼 제어에 대한 값을 다음 이름으로 제공해야 합니다. (0) | 2023.08.02 |
| MySQL의 INSERT IGNORE INTO & Foreign 키 (0) | 2023.08.02 |
| 치명적 오류: 정의되지 않은 함수 socket_create()를 호출합니다. (0) | 2023.08.02 |