<div id="readability-page-1" class="page"><div>이미지 사이즈 관련해서 접했던 키워드들을 적어둔다.
<h2 id="css">css</h2>
이미지 비율을 유지한체 가운데정렬시키기
<pre><code>/* img 엘리먼트를 담고있는 컨테이너*/
object-fit: contain;</code></pre>
<pre><code>/* div에 bacground img를 세팅 */
background: url({img_url});
background-size: cover;
background-position: center;</code></pre>
<h2 id="nextimage-의-한계">next/image 의 한계</h2>
한계점들이 많았다.
<ul>
<li><code>Next/Image</code>는 width height prop 을 필수로 입력해야하기 때문에, 가로나 세로 특정 비율에 맞춰서 이미지가 커지게 할 수 없었다. (물론 리서칭이 부족했을수도..) 
<code>img</code> 태그는 width 값만 넣으면 비율에 맞춰서 height값을 정해준다.</li>
<li>대용량 이미지를 next/image의 넣을경우 이미지를 처리하는과정에서 nextjs 렌더링서버가 뻗어버리곤했다. 대용량 이미지를 사용할 땐, 이미지를 줄이거나 img 태그를 활용하자. 
img 태그에 사용하면 별다른 이미지처리없이 바로 그리기 때문에 느리게 나타나긴하더라도 앱이 마비되거나 하진 않는다.</li>
</ul></div></div>

ginameee.log

Jangchun Lee

이미지 사이즈 관련해서 접했던 키워드들을 적어둔다.
css
이미지 비율을 유지한체 가운데정렬시키기
/* img 엘리먼트를 담고있는 컨테이너*/
object-fit: contain;
/* div에 bacground img를 세팅 */
background: url({img_url});
background-size: cover;
background-position: center;
next/image 의 한계
한계점들이 많았다.
Next/Image는 width height prop 을 필수로 입력해야하기 때문에, 가로나 세로 특정 비율에 맞춰서 이미지가 커지게 할 수 없었다. (물론 리서칭이 부족했을수도..)
img 태그는 width 값만 넣으면 비율에 맞춰서 height값을 정해준다.
대용량 이미지를 next/image의 넣을경우 이미지를 처리하는과정에서 nextjs 렌더링서버가 뻗어버리곤했다. 대용량 이미지를 사용할 땐, 이미지를 줄이거나 img 태그를 활용하자. 
img 태그에 사용하면 별다른 이미지처리없이 바로 그리기 때문에 느리게 나타나긴하더라도 앱이 마비되거나 하진 않는다.

이미지 사이즈 관련 이슈 간단정리

댓글