이미지의 원본비율을 유지하려고 합니다만...
644
投稿した質問数 1
import React from 'react';
import { Col } from 'antd';
function GridCards(props) {
if(props.landingPage) {
return (
<Col lg={6} md={8} xs={24}>
<div style={{ position: 'relative' }}>
<a href={`/movie/${props.movieId}`}>
<img style={{ width: '100%', height: 'auto' }}src={props.image} alt={props.movieName} />
</a>
</div>
</Col>
);
} else {
return (
<Col lg={6} md={8} xs={24}>
<div style={{ position: 'relative' }}>
<img style={{ width: '100%', height: 'auto' }}src={props.image} alt={props.charactermame} />
</div>
</Col>
);
}
}
export default GridCards;
어떻게 해결하면 이런 문제를 없앨 수 있을까요?
antd의 Row, Col을 건드려봐도 잘 모르겠습니다.
回答 2
0
혹시 해결 방법을 찾으셨나요?? 저도 원본 크기를 유지하려고 하는데 같은 문제때문에 진도를 못나가고 있습니다ㅜㅜ,,
0
https://github.com/gonudayo/MY-MVDB/blob/master/client/src/components/views/commons/GridCards.js
옛날에 해서 잘 기억이 안나긴 하는데, 일단 저는 이렇게 해결 했으니 코드 한번 적용해 보시고 궁금한거 있으시면 더 설명드릴게요~!
0
안녕하세요 !!!
<img style={{ width: '100%', height: 'auto' }}
여기서 height을 특정값으로 입력해보실래요? !!!
0
특정값 ex) 320px 등등 하면 원본비율이 유지되지 않습니다...
원본비율을 유지하면서 그리드 구조도 유지하고 싶습니다...!
<Col xxl={2} xl={4} lg={6} md={8} sm={12} xs={16}>
<div style={{ width: '189.0px', height: '283.5px', position: 'relative' }}>
<a href={`/movie/${props.movieId}`}>
<img style={{ width: '100%', height: 'auto' }}src={props.image} alt={props.movieName} />
</a>
</div>
</Col>
그래서 이런식으로 변경해서 얼추 제가 원하는대로 표시되고 있는데 여전히 문제가 있습니다.
Col 부분에 여러 수치들을 대입하며 최대한 안겹치게 해보았는데,
여전히 특정 비율에서는 저렇게 겹치고 맙니다.
애초에 겹치지 않게 하는 방법이 있을까요?
Col 부분에 둔 옵션과
div에 padding: '10px'
해당 옵션으로 거리를 두면 다른 곳에서는 괜찮은데
이런 비율에서는 공간이 너무 많이 남네요
asd
에러서 요렇게만 해보세요
0
228
1
antd Menu 질문
0
260
1
movieTitle
0
218
1
npm run dev 연결이 안됩니다ㅜㅜ
0
410
1
npm run dev 오류
0
855
1
403 forbidden error
0
1068
2
npm run dev 오류
0
696
1
모듈이 없다는데요
0
1278
1
npm run dev 실행시 오류
0
5372
1
504 Gateway Timeout Error
0
1448
1
컴파일 에러 관련 문의
0
504
1
npm run dev 오류
0
760
1
이미지가 안떠요...
0
369
2
npm run dev 실행하고 인증이 안되는거 같아요
0
531
1
cd client에서 npm install 오류
0
1418
1
npm run dev시 localhost가 자꾸 3000으로 연결됩니다
0
972
1
Netlify + AWS Elastic Beanstalk 를 이용한 배포
1
1785
1
[nodemon] app crashed - waiting for file changes before starting... Error occurred while proxying request localhost:3000/api/hello to http://localhost:5000/ 해결법
0
460
0
지금 듣기엔 안되는 강의일까요?
0
718
1
사진이 2개 2개씩 다른줄에 나와요 ㅠㅠ
0
428
1
비동기 처리가 영상과 다르게 됩니다..
0
247
0
#2강 npm install
0
768
4
LandingPage.js 내 useState(null) 이용하는 이유
0
226
0
client 부분에 App.js 와 Config.js 위치가 다른데 상관없는 것인가요?
0
384
1